fix flex behaviour in examinations and investigations

ubclaunchpad · Dec 1, 2024 · da44242 · da44242
1 parent d6b803f
commit da44242
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 24 deletions.
diff --git a/frontend/src/components/Inputs/CLInputs.css b/frontend/src/components/Inputs/CLInputs.css
@@ -1,3 +1,7 @@
+.input-with-units-container {
+  display: flex;
+}
+
 .input-with-units {
   box-sizing: border-box;
   width: 100%;
@@ -7,10 +11,6 @@
   background-color: transparent;
 }
 
-.input-with-units-container {
-  display: flex;
-}
-
 .input-units {
   display: flex;
   justify-content: center;

diff --git a/frontend/src/pages/manual_entry/sections/case_planning/CasePlanning.jsx b/frontend/src/pages/manual_entry/sections/case_planning/CasePlanning.jsx
@@ -18,37 +18,37 @@ export const CasePlanning = () => {
             <Grid size={12}>
               <p className="input-title-bold">Operative Notes</p>
             </Grid>
-            <Grid size={1.5}>
+            <Grid size={1}>
               <div className="operative-notes-input-title-container">
                 <p className="input-title">CPB</p>
               </div>
             </Grid>
-            <Grid size={5.25}>
+            <Grid size={5.5}>
               <CLInputWithUnits units="h" placeholder="CPB"/>
             </Grid>
-            <Grid size={5.25}>
+            <Grid size={5.5}>
               <CLInputWithUnits units="m" placeholder="CPB"/>
             </Grid>
-            <Grid size={1.5}>
+            <Grid size={1}>
               <div className="operative-notes-input-title-container">
                 <p className="input-title">XC</p>
               </div>
             </Grid>
-            <Grid size={5.25}>
+            <Grid size={5.5}>
               <CLInputWithUnits units="h" placeholder="XC"/>
             </Grid>
-            <Grid size={5.25}>
+            <Grid size={5.5}>
               <CLInputWithUnits units="m" placeholder="XC"/>
             </Grid>
-            <Grid size={1.5}>
+            <Grid size={1}>
               <div className="operative-notes-input-title-container">
                 <p className="input-title">CA</p>
               </div>
             </Grid>
-            <Grid size={5.25}>
+            <Grid size={5.5}>
               <CLInputWithUnits units="h" placeholder="CA"/>
             </Grid>
-            <Grid size={5.25}>
+            <Grid size={5.5}>
               <CLInputWithUnits units="m" placeholder="CA"/>
             </Grid>
           </Grid>

diff --git a/...s/manual_entry/sections/examinations_and_investigations/ExaminationsAndInvestigations.css b/...s/manual_entry/sections/examinations_and_investigations/ExaminationsAndInvestigations.css
@@ -1,9 +1,12 @@
 .input-with-arrow-button-container {
   display: flex;
-  flex-direction: row;
   gap: 8px;
 }
 
+.input-with-units-flex-container {
+  flex: 1;
+}
+
 .arrows-icon-button {
   display: flex;
   justify-content: center;

diff --git a/...s/manual_entry/sections/examinations_and_investigations/ExaminationsAndInvestigations.jsx b/...s/manual_entry/sections/examinations_and_investigations/ExaminationsAndInvestigations.jsx
@@ -144,7 +144,9 @@ const WeightSection = () => {
 
   return (
     <div className="input-with-arrow-button-container">
-      <CLInputWithUnits units={getUnits()} placeholder={`Weight (${getUnits()})`} />
+      <div className="input-with-units-flex-container">
+        <CLInputWithUnits units={getUnits()} placeholder={`Weight (${getUnits()})`} />
+      </div>
       <button className="arrows-icon-button" onClick={handleUnitChange}>
         <ArrowsUpDownIcon className="arrows-icon"/>
       </button>
@@ -169,19 +171,23 @@ const HeightSection = () => {
     <div className="input-with-arrow-button-container">
       {
         units === METRIC &&
-        <CLInputWithUnits units="cm" placeholder="Height (cm)" />
+        <div className="input-with-units-flex-container">
+          <CLInputWithUnits units="cm" placeholder="Height (cm)" />
+        </div>
       }
       {
         units === IMPERIAL &&
         (
-          <Grid container spacing={1}>
-            <Grid size={6}>
-              <CLInputWithUnits units="ft" placeholder="ft" />
-            </Grid>
-            <Grid size={6}>
-              <CLInputWithUnits units="in" placeholder="in" />
-            </Grid>
-          </Grid>
+          <div className="input-with-units-flex-container">
+            <Grid container spacing={1}>
+              <Grid size={6}>
+                <CLInputWithUnits units="ft" placeholder="ft" />
+              </Grid>
+              <Grid size={6}>
+                <CLInputWithUnits units="in" placeholder="in" />
+              </Grid>
+            </Grid>
+          </div>
         )
       }
       <button className="arrows-icon-button" onClick={handleUnitChange}>