(chore) O3-3996 - Ward app - workspace styling changes (#1384)

* (chore) O3-3996 - Ward app - workspace styling changes * fix workspace action menu icons
openmrs · Nov 22, 2024 · 4d7f15d · 4d7f15d
1 parent e4e2223
commit 4d7f15d
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 9 deletions.
diff --git a/...ages/esm-ward-app/src/action-menu-buttons/clinical-forms-workspace-siderail.component.tsx b/...ages/esm-ward-app/src/action-menu-buttons/clinical-forms-workspace-siderail.component.tsx
@@ -29,7 +29,7 @@ const ClinicalFormsWorkspaceSideRailIcon: React.FC = () => {
       label={t('clinicalForms', 'Clinical forms')}
       iconDescription={t('clinicalForms', 'Clinical forms')}
       handler={launchPatientWorkspaceCb}
-      type="ward-patient-clinical-form"
+      type="ward-patient-clinical-forms"
     />
   );
 };

diff --git a/packages/esm-ward-app/src/action-menu-buttons/discharge-workspace-siderail.component.tsx b/packages/esm-ward-app/src/action-menu-buttons/discharge-workspace-siderail.component.tsx
@@ -14,7 +14,7 @@ export default function PatientDischargeSideRailIcon() {
       label={t('discharge', 'Discharge')}
       iconDescription={t('discharge', 'Discharge')}
       handler={handler}
-      type="patient-discharge-workspace"
+      type="ward-patient-discharge"
     />
   );
 }
diff --git a/packages/esm-ward-app/src/ward-workspace/patient-details/ward-patient.style.scss b/packages/esm-ward-app/src/ward-workspace/patient-details/ward-patient.style.scss
@@ -5,7 +5,19 @@
   min-height: var(--desktop-workspace-window-height);
 }
 
+.patientWorkspace {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+}
+
 .headerPatientDetail {
   @include type.type-style('body-compact-02');
   margin: 0 layout.$spacing-02;
 }
+
+.patientWorkspaceContentSlot {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+}
diff --git a/packages/esm-ward-app/src/ward-workspace/patient-details/ward-patient.workspace.tsx b/packages/esm-ward-app/src/ward-workspace/patient-details/ward-patient.workspace.tsx
@@ -4,6 +4,7 @@ import { type WardPatientWorkspaceProps } from '../../types';
 import WardPatientWorkspaceBanner from '../patient-banner/patient-banner.component';
 import styles from './ward-patient.style.scss';
 import { type WardConfigObject } from '../../config-schema';
+import classNames from 'classnames';
 
 attach('ward-patient-workspace-header-slot', 'patient-vitals-info');
 
@@ -15,14 +16,14 @@ export default function WardPatientWorkspace({ wardPatient }: WardPatientWorkspa
   return (
     <>
       {wardPatient && (
-        <div className={styles.workspaceContainer}>
+        <div className={classNames(styles.workspaceContainer, styles.patientWorkspace)}>
           <WardPatientWorkspaceBanner {...{ wardPatient }} />
-          <div>
-            <ExtensionSlot name="ward-patient-workspace-header-slot" state={extensionSlotState} />
-          </div>
-          <div>
-            <ExtensionSlot name="ward-patient-workspace-content-slot" state={extensionSlotState} />
-          </div>
+          <ExtensionSlot name="ward-patient-workspace-header-slot" state={extensionSlotState} />
+          <ExtensionSlot
+            name="ward-patient-workspace-content-slot"
+            state={extensionSlotState}
+            className={styles.patientWorkspaceContentSlot}
+          />
         </div>
       )}
     </>