Add wrap property to some flex boxes.

gbmhunter · Jun 18, 2024 · efd0580 · efd0580
1 parent 713bd26
commit efd0580
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 7 deletions.
diff --git a/.../PortConfigurationSettingsView.module.css → .../PortSettings/PortSettingsView.module.css b/.../PortConfigurationSettingsView.module.css → .../PortSettings/PortSettingsView.module.css
diff --git a/...ettings/PortConfigurationSettingsView.tsx → ...ettings/PortSettings/PortSettingsView.tsx b/...ettings/PortConfigurationSettingsView.tsx → ...ettings/PortSettings/PortSettingsView.tsx
@@ -27,20 +27,20 @@ import {
   FlowControl,
 } from 'src/model/Settings/PortConfigurationSettings/PortConfigurationSettings';
 import { portStateToButtonProps } from 'src/view/Components/PortStateToButtonProps';
-import styles from './PortConfigurationSettingsView.module.css';
+import styles from './PortSettingsView.module.css';
 
 interface Props {
   app: App;
 }
 
-function PortConfigurationView(props: Props) {
+function PortSettingsView(props: Props) {
   const { app } = props;
 
   return (
     <div className={styles.noOutline} style={{ display: 'flex', flexDirection: 'column', alignItems: 'start' }}>
       <div style={{ height: '20px' }}></div>
 
-      <Box display="flex" flexDirection="row">
+      <div style={{ display: 'flex', flexDirection: 'row', flexWrap: 'wrap' }}>
         {/* ============================================================== */}
         {/* BAUD RATE */}
         {/* ============================================================== */}
@@ -156,7 +156,7 @@ function PortConfigurationView(props: Props) {
             </Select>
           </FormControl>
         </Tooltip>
-      </Box>
+      </div>
 
       {/* ============================================================== */}
       {/* FLOW CONTROL */}
@@ -273,7 +273,7 @@ function PortConfigurationView(props: Props) {
 
       <div style={{ height: '20px' }}></div>
 
-      <div id="row-with-select-port-and-open-port-buttons" style={{ display: 'flex', gap: '20px' }}>
+      <div id="row-with-select-port-and-open-port-buttons" style={{ display: 'flex', flexWrap: 'wrap', gap: '20px' }}>
         {/* =============================================================== */}
         {/* SELECT PORT BUTTON */}
         {/* =============================================================== */}
@@ -350,4 +350,4 @@ function PortConfigurationView(props: Props) {
   );
 }
 
-export default observer(PortConfigurationView);
+export default observer(PortSettingsView);
diff --git a/src/view/Settings/SettingsView.tsx b/src/view/Settings/SettingsView.tsx
@@ -9,7 +9,7 @@ import { observer } from 'mobx-react-lite';
 import { App } from '../../model/App';
 import { SettingsCategories } from '../../model/Settings/Settings';
 
-import PortConfigurationSettingsView from './PortConfigurationSettings/PortConfigurationSettingsView';
+import PortConfigurationSettingsView from './PortSettings/PortSettingsView';
 import DataProcessingSettingsView from './RxSettings/RxSettingsView';
 import DisplaySettingsView from './DisplaySettings/DisplaySettingsView';
 import TxSettingsView from './TxSettings/TxSettingsView';