From 4d7f15d3a34d958e50f6b6070885ff853047b015 Mon Sep 17 00:00:00 2001
From: chibongho <cbho@pih.org>
Date: Fri, 22 Nov 2024 08:18:55 -0500
Subject: [PATCH] (chore) O3-3996 - Ward app - workspace styling changes
 (#1384)

* (chore) O3-3996 - Ward app - workspace styling changes

* fix workspace action menu icons
---
 ...linical-forms-workspace-siderail.component.tsx |  2 +-
 .../discharge-workspace-siderail.component.tsx    |  2 +-
 .../patient-details/ward-patient.style.scss       | 12 ++++++++++++
 .../patient-details/ward-patient.workspace.tsx    | 15 ++++++++-------
 4 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/packages/esm-ward-app/src/action-menu-buttons/clinical-forms-workspace-siderail.component.tsx b/packages/esm-ward-app/src/action-menu-buttons/clinical-forms-workspace-siderail.component.tsx
index d5faca5b7..0b62c566a 100644
--- a/packages/esm-ward-app/src/action-menu-buttons/clinical-forms-workspace-siderail.component.tsx
+++ b/packages/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
index 63e32d822..dd2b5451b 100644
--- 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
index ebf3d15fd..93e9ffbd0 100644
--- 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
index a7f7eb084..23a5a7ec4 100644
--- 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>
       )}
     </>