(fix) - O3-3996 - Ward App - fix styling for patient card footer and …

…mother child row
openmrs · Sep 23, 2024 · 1604bba · 1604bba
1 parent cdb8bbd
commit 1604bba
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 13 deletions.
diff --git a/packages/esm-ward-app/src/beds/occupied-bed.scss b/packages/esm-ward-app/src/beds/occupied-bed.scss
@@ -5,6 +5,7 @@
   display: flex;
   flex-direction: column;
   background-color: vars.$ui-02;
+  height: fit-content;
 }
 
 .bedDivider {

diff --git a/packages/esm-ward-app/src/ward-patient-card/card-rows/mother-child-row.extension.tsx b/packages/esm-ward-app/src/ward-patient-card/card-rows/mother-child-row.extension.tsx
@@ -94,7 +94,7 @@ const MotherChildRowExtension: WardPatientCard = ({ patient }) => {
             <div className={styles.motherOrBabyIconDiv}>
               <Icon className={styles.motherOrBabyIcon} size={24} />
             </div>
-            <div className={wardPatientCardStyles.dotSeparatedChildren}>
+            <div className={classNames(styles.motherOrBabyRowElementsDev, wardPatientCardStyles.dotSeparatedChildren)}>
               <WardPatientName patient={patientB} />
               <WardPatientIdentifier patient={patientB} />
               <WardPatientAge patient={patientB} />

diff --git a/packages/esm-ward-app/src/ward-patient-card/card-rows/mother-child-row.scss b/packages/esm-ward-app/src/ward-patient-card/card-rows/mother-child-row.scss
@@ -5,8 +5,11 @@
   display: flex;
 }
 
-.motherOrBabyIconDiv {
+.motherOrBabyRowElementsDev {
   flex: 1;
+}
+
+.motherOrBabyIconDiv {
   display: flex;
   align-items: center;
 }

diff --git a/packages/esm-ward-app/src/ward-patient-card/ward-patient-card.component.tsx b/packages/esm-ward-app/src/ward-patient-card/ward-patient-card.component.tsx
@@ -32,6 +32,18 @@ const WardPatientCard: WardPatientCard = (wardPatient) => {
         ))}
         <ExtensionSlot name={headerExtensionSlotName} state={wardPatient} />
       </div>
+      {footerRowElements.length > 0 && (
+        <div className={styles.wardPatientCardRow}>
+          {footerRowElements.map((elementId, i) => (
+            <WardPatientCardElement
+              key={`ward-card-${patient.uuid}-footer-${i}`}
+              elementId={elementId}
+              {...wardPatient}
+            />
+          ))}
+          <ExtensionSlot name={footerExtensionSlotName} state={wardPatient} />
+        </div>
+      )}
       <ExtensionSlot
         name="ward-patient-card-pending-items-slot"
         state={wardPatient}
@@ -40,18 +52,8 @@ const WardPatientCard: WardPatientCard = (wardPatient) => {
       <ExtensionSlot
         name={rowsExtensionSlotName}
         state={wardPatient}
-        className={classNames(styles.wardPatientCardRow, styles.wardPatientCardExtensionSlot)}
+        className={classNames(styles.wardPatientCardExtensionSlot)}
       />
-      <div className={styles.wardPatientCardRow}>
-        {footerRowElements.map((elementId, i) => (
-          <WardPatientCardElement
-            key={`ward-card-${patient.uuid}-footer-${i}`}
-            elementId={elementId}
-            {...wardPatient}
-          />
-        ))}
-        <ExtensionSlot name={footerExtensionSlotName} state={wardPatient} />
-      </div>
       <button
         className={styles.wardPatientCardButton}
         onClick={() => {