(fix) O3 4341: Fix modal close buttons placement in the lab app (#114)

* O3-4341 add scss to pickup-lab-request-modal

* modified scss for reject-lab-request-modal

src/lab-tabs/modals/pickup-lab-request-modal.component.tsx

@@ -6,6 +6,7 @@ import { type Order } from '@openmrs/esm-patient-common-lib';
 import { restBaseUrl, showNotification, showSnackbar, useAbortController, useConfig } from '@openmrs/esm-framework';
 import { type Config } from '../../config-schema';
 import { setFulfillerStatus } from '../../laboratory-resource';
+import styles from './pickup-lab-request-modal.scss';
 
 interface PickupLabRequestModal {
   closeModal: () => void;
@@ -51,7 +52,11 @@ const PickupLabRequestModal: React.FC<PickupLabRequestModal> = ({ order, closeMo
 
   return (
     <div>
-      <ModalHeader closeModal={closeModal} title={t('pickRequest', 'Pick lab request')} />
+      <ModalHeader
+        closeModal={closeModal}
+        title={t('pickRequest', 'Pick lab request')}
+        className={styles.modalHeader}
+      />
       <ModalBody>
         <p>
           {t(

src/lab-tabs/modals/pickup-lab-request-modal.scss

@@ -0,0 +1,29 @@
+@use '@carbon/layout';
+
+.modalHeader {
+  :global {
+    .cds--modal-close-button {
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-end: 0;
+      margin: 0;
+      margin-top: calc(-1 * #{layout.$spacing-05});
+    }
+
+    .cds--modal-close {
+      background-color: rgba(0, 0, 0, 0);
+
+      &:hover {
+        background-color: var(--cds-layer-hover);
+      }
+    }
+
+    .cds--popover--left > .cds--popover > .cds--popover-content {
+      transform: translate(-4rem, 0.85rem);
+    }
+
+    .cds--popover--left > .cds--popover > .cds--popover-caret {
+      transform: translate(-3.75rem, 1.25rem);
+    }
+  }
+}

src/lab-tabs/modals/reject-lab-request-modal.component.tsx

@@ -66,6 +66,7 @@ const RejectLabRequestModal: React.FC<RejectLabRequestModalProps> = ({ order, cl
       <ModalHeader
         closeModal={closeModal}
         title={`${t('rejectLabRequest', 'Reject lab request')} [${order.orderNumber}]`}
+        className={styles.modalHeader}
       />
       <ModalBody>
         <div className={styles.modalBody}>

src/lab-tabs/modals/reject-lab-request-modal.scss

@@ -11,3 +11,31 @@ section {
 .modalBody {
   padding-bottom: layout.$spacing-05;
 }
+
+.modalHeader {
+  :global {
+    .cds--modal-close-button {
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-end: 0;
+      margin: 0;
+      margin-top: calc(-1 * #{layout.$spacing-05});
+    }
+
+    .cds--modal-close {
+      background-color: rgba(0, 0, 0, 0);
+
+      &:hover {
+        background-color: var(--cds-layer-hover);
+      }
+    }
+
+    .cds--popover--left > .cds--popover > .cds--popover-content {
+      transform: translate(-4rem, 0.85rem);
+    }
+
+    .cds--popover--left > .cds--popover > .cds--popover-caret {
+      transform: translate(-3.75rem, 1.25rem);
+    }
+  }
+}