(fix) O3-3897: Improvements to the 'all encounters' tab on the visits…

… page (#2024) * make encounter tabs sticky * add border to tabs container and remove padding in tabs-content * Fixup --------- Co-authored-by: Dennis Kigen <[email protected]>
openmrs · Sep 23, 2024 · 535c41c · 535c41c
1 parent 5f72242
commit 535c41c
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 4 deletions.
diff --git a/packages/esm-patient-chart-app/src/patient-chart/chart-review/dashboard-view.scss b/packages/esm-patient-chart-app/src/patient-chart/chart-review/dashboard-view.scss
@@ -14,6 +14,11 @@
   margin: 1.3125rem;
 }
 
+// See https://zpl.io/lrlmdq0 for the Visits dashboard design
+[data-extension-slot-name='patient-chart-encounters-dashboard-slot'] {
+  margin: 0 layout.$spacing-05;
+}
+
 .dashboardContainer:not(:has([data-extension-slot-name='patient-chart-attachments-dashboard-slot'])) {
   container-name: dashboard;
   container-type: inline-size;

diff --git a/...t-chart-app/src/visit/visits-widget/past-visits-components/visits-table/visits-table.scss b/...t-chart-app/src/visit/visits-widget/past-visits-components/visits-table/visits-table.scss
@@ -3,6 +3,7 @@
 @use '@openmrs/esm-styleguide/src/vars' as *;
 
 .tableContainer {
+  margin: layout.$spacing-05 0;
   padding: 0;
 
   :global(.cds--data-table-header) {

diff --git a/packages/esm-patient-chart-app/src/visit/visits-widget/visit-detail-overview.component.tsx b/packages/esm-patient-chart-app/src/visit/visits-widget/visit-detail-overview.component.tsx
@@ -29,7 +29,7 @@ function VisitDetailOverviewComponent({ patientUuid }: VisitOverviewComponentPro
   return (
     <div className={styles.tabs}>
       <Tabs>
-        <TabList aria-label="Visit detail tabs" contained>
+        <TabList aria-label="Visit detail tabs" className={styles.tabList}>
           <Tab className={styles.tab} id="visit-summaries-tab">
             {t('visitSummaries', 'Visit summaries')}
           </Tab>

diff --git a/packages/esm-patient-chart-app/src/visit/visits-widget/visit-detail-overview.scss b/packages/esm-patient-chart-app/src/visit/visits-widget/visit-detail-overview.scss
@@ -34,17 +34,31 @@
 }
 
 .tabs > :global(.cds--tab-content) {
-  padding: layout.$spacing-05 0 !important;
+  padding: 0 0 !important;
+}
+
+.tabList {
+  position: sticky;
+  top: 3rem;
+  z-index: 10;
+  background-color: $ui-01;
+  border-bottom: 2px solid $ui-03;
+
+  & :global(.cds--tabs__nav-link) {
+    border-bottom: none !important;
+  }
 }
 
 .tab {
+  height: 2.5rem;
+
   &:active,
   &:focus {
-    outline: layout.$spacing-01 solid var(--brand-03) !important;
+    outline: none !important;
   }
 
   &[aria-selected='true'] {
-    box-shadow: inset 0 layout.$spacing-01 0 0 var(--brand-03) !important;
+    border-bottom: 3px solid var(--brand-03) !important;
   }
 }