From 84978d3a6ceb44dbc54edf5c2af47ad16f630932 Mon Sep 17 00:00:00 2001
From: Usama Idriss Kakumba <53287480+usamaidrsk@users.noreply.github.com>
Date: Sat, 16 Dec 2023 20:22:17 +0300
Subject: [PATCH] (fix) O3-2651: Fix some spacing and alignment issues in the
 Patient Chart (#1536)

Co-authored-by: Vineet Sharma <sharmava05@gmail.com>
---
 .../appointments/appointments-action-menu.component.tsx   | 2 +-
 .../attachments/attachments-table-overview.component.tsx  | 2 +-
 .../src/attachments/attachments-table-overview.scss       | 2 +-
 packages/esm-patient-chart-app/src/root.scss              | 5 -----
 .../visits-table/visits-table.component.tsx               | 1 +
 .../src/conditions/conditions-action-menu.component.tsx   | 2 +-
 .../components/medications-details-table.component.tsx    | 8 +++++++-
 .../src/components/orders-details-table.component.tsx     | 8 +++++++-
 8 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/packages/esm-patient-appointments-app/src/appointments/appointments-action-menu.component.tsx b/packages/esm-patient-appointments-app/src/appointments/appointments-action-menu.component.tsx
index ddd1b12acb..b3b839ae25 100644
--- a/packages/esm-patient-appointments-app/src/appointments/appointments-action-menu.component.tsx
+++ b/packages/esm-patient-appointments-app/src/appointments/appointments-action-menu.component.tsx
@@ -36,7 +36,7 @@ export const AppointmentsActionMenu = ({ appointment, patientUuid }: appointment
 
   return (
     <Layer className={styles.layer}>
-      <OverflowMenu aria-label="Edit or delete appointment" size={isTablet ? 'lg' : 'sm'} flipped>
+      <OverflowMenu aria-label="Edit or delete appointment" size={isTablet ? 'lg' : 'sm'} flipped align="left">
         <OverflowMenuItem
           className={styles.menuItem}
           id="editAppointment"
diff --git a/packages/esm-patient-attachments-app/src/attachments/attachments-table-overview.component.tsx b/packages/esm-patient-attachments-app/src/attachments/attachments-table-overview.component.tsx
index d365f7f1c6..c6e3b60448 100644
--- a/packages/esm-patient-attachments-app/src/attachments/attachments-table-overview.component.tsx
+++ b/packages/esm-patient-attachments-app/src/attachments/attachments-table-overview.component.tsx
@@ -106,7 +106,7 @@ const AttachmentsTableOverview: React.FC<AttachmentsTableOverviewProps> = ({
                     <TableCell key={cell.id}>{cell.value?.content ?? cell.value}</TableCell>
                   ))}
                   <TableCell className="cds--table-column-menu">
-                    <OverflowMenu size={isTablet ? 'lg' : 'sm'} flipped>
+                    <OverflowMenu size={isTablet ? 'lg' : 'sm'} flipped align="left">
                       <OverflowMenuItem
                         itemText={t('delete', 'Delete')}
                         isDelete
diff --git a/packages/esm-patient-attachments-app/src/attachments/attachments-table-overview.scss b/packages/esm-patient-attachments-app/src/attachments/attachments-table-overview.scss
index 3794e05339..cce0640bf5 100644
--- a/packages/esm-patient-attachments-app/src/attachments/attachments-table-overview.scss
+++ b/packages/esm-patient-attachments-app/src/attachments/attachments-table-overview.scss
@@ -2,7 +2,7 @@
 
 .attachmentTable > .cds--data-table-header {
   display: none;
-} 
+}
 
 .link {
   text-decoration: none;
diff --git a/packages/esm-patient-chart-app/src/root.scss b/packages/esm-patient-chart-app/src/root.scss
index 4b008cb1be..e2e7705cf7 100644
--- a/packages/esm-patient-chart-app/src/root.scss
+++ b/packages/esm-patient-chart-app/src/root.scss
@@ -20,11 +20,6 @@
     scrollbar-width: none;
   }
 
-  ::-webkit-scrollbar {
-    width: 0px;
-    background-color: transparent
-  }
-
   :global(.cds--side-nav__overlay-active) {
     background-color: transparent;
   }
diff --git a/packages/esm-patient-chart-app/src/visit/visits-widget/past-visits-components/visits-table/visits-table.component.tsx b/packages/esm-patient-chart-app/src/visit/visits-widget/past-visits-components/visits-table/visits-table.component.tsx
index 7c393f59f8..783abd3ff4 100644
--- a/packages/esm-patient-chart-app/src/visit/visits-widget/past-visits-components/visits-table/visits-table.component.tsx
+++ b/packages/esm-patient-chart-app/src/visit/visits-widget/past-visits-components/visits-table/visits-table.component.tsx
@@ -254,6 +254,7 @@ const VisitTable: React.FC<VisitTableProps> = ({ showAllEncounters, visits, pati
                                 aria-label="Encounter table actions menu"
                                 size={desktopLayout ? 'sm' : 'lg'}
                                 flipped
+                                align="left"
                               >
                                 <OverflowMenuItem
                                   size={desktopLayout ? 'sm' : 'lg'}
diff --git a/packages/esm-patient-conditions-app/src/conditions/conditions-action-menu.component.tsx b/packages/esm-patient-conditions-app/src/conditions/conditions-action-menu.component.tsx
index 0124f721d7..957240dc58 100644
--- a/packages/esm-patient-conditions-app/src/conditions/conditions-action-menu.component.tsx
+++ b/packages/esm-patient-conditions-app/src/conditions/conditions-action-menu.component.tsx
@@ -35,7 +35,7 @@ export const ConditionsActionMenu = ({ condition, patientUuid }: conditionsActio
 
   return (
     <Layer className={styles.layer}>
-      <OverflowMenu aria-label="Edit or delete condition" size={isTablet ? 'lg' : 'sm'} flipped>
+      <OverflowMenu aria-label="Edit or delete condition" size={isTablet ? 'lg' : 'sm'} flipped align="left">
         <OverflowMenuItem
           className={styles.menuItem}
           id="editCondition"
diff --git a/packages/esm-patient-medications-app/src/components/medications-details-table.component.tsx b/packages/esm-patient-medications-app/src/components/medications-details-table.component.tsx
index 2263b3e6d7..70f3a0db99 100644
--- a/packages/esm-patient-medications-app/src/components/medications-details-table.component.tsx
+++ b/packages/esm-patient-medications-app/src/components/medications-details-table.component.tsx
@@ -488,7 +488,13 @@ function OrderBasketItemActions({
   }, [items, setItems, medication, openOrderBasket]);
 
   return (
-    <OverflowMenu aria-label="Actions menu" selectorPrimaryFocus={'#modify'} flipped size={isTablet ? 'lg' : 'md'}>
+    <OverflowMenu
+      aria-label="Actions menu"
+      selectorPrimaryFocus={'#modify'}
+      flipped
+      size={isTablet ? 'lg' : 'md'}
+      align="left"
+    >
       {showModifyButton && (
         <OverflowMenuItem
           className={styles.menuItem}
diff --git a/packages/esm-patient-orders-app/src/components/orders-details-table.component.tsx b/packages/esm-patient-orders-app/src/components/orders-details-table.component.tsx
index d226d4ec45..11d5a39317 100644
--- a/packages/esm-patient-orders-app/src/components/orders-details-table.component.tsx
+++ b/packages/esm-patient-orders-app/src/components/orders-details-table.component.tsx
@@ -411,7 +411,13 @@ function OrderBasketItemActions({
   }, [items, orderItem, setItems]);
 
   return (
-    <OverflowMenu ariaLabel="Actions menu" selectorPrimaryFocus={'#modify'} flipped size={isTablet ? 'lg' : 'md'}>
+    <OverflowMenu
+      ariaLabel="Actions menu"
+      selectorPrimaryFocus={'#modify'}
+      flipped
+      size={isTablet ? 'lg' : 'md'}
+      align="left"
+    >
       <OverflowMenuItem
         className={styles.menuItem}
         id="modify"