feat(fe): adjust search table column widths (#1301)

* feat: adjust search table column widths * feat: apply width and min-width globally to cds-table
bcgov · Nov 6, 2024 · d743f53 · d743f53
1 parent 63e0fde
commit d743f53
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 32 deletions.
diff --git a/frontend/src/assets/styles/global.scss b/frontend/src/assets/styles/global.scss
@@ -103,6 +103,9 @@
   //Layout
   --header-height: 3.5rem;
 
+  //Data-table
+  --col-padding-rem: 1.5;
+
   /*
   The expected width of the scroll bar.
   While this might not match the real value, it should help to make a rough adjustment, at least.
@@ -1456,6 +1459,8 @@ cds-accordion-item[open]:not([disabled])::part(content),
 }
 
 cds-table {
+  width: 100%;
+  min-width: 63rem;
   table-layout: fixed;
   border-collapse: separate;
 }
@@ -1490,25 +1495,63 @@ cds-table-header-cell {
   background: var(--light-theme-layer-accent-layer-accent-01, #dfdfe1);
 }
 
-.col-6_75rem {
-  width: 6.75rem;
-}
+#search-table {
+  /*
+  Sizes come from designed widths in rem minus their padding, where screen width is 1584px and
+  table width is 1328px.
+  */
+  --col-6_75-rem: 6.75;
+  --col-19_4375-rem: 19.4375;
+  --col-14_75-rem: 14.75;
+  --col-7_0625-rem: 7.0625;
+
+  --padding-fixed-rem: 1;
+
+  --total: calc(
+    var(--col-padding-rem)
+    + var(--col-6_75-rem) + 2 * var(--padding-fixed-rem)
+    + var(--col-6_75-rem) + 2 * var(--padding-fixed-rem)
+    + var(--col-19_4375-rem) + 2 * var(--padding-fixed-rem)
+    + var(--col-14_75-rem) + 2 * var(--padding-fixed-rem)
+    + var(--col-14_75-rem) + 2 * var(--padding-fixed-rem)
+    + var(--col-7_0625-rem) + 2 * var(--padding-fixed-rem)
+  );
 
-.col-19_4375rem {
-  width: 19.4375rem;
-}
+  --col-status-rem: 5.75;
 
-.col-14_75rem {
-  width: 14.75rem;
-}
+  /*
+  Border-box allows to keep calculations simple, regardless of the padding, while keeping the
+  padding width always the same.
+  */
+  cds-table-header-cell {
+    box-sizing: border-box;
+  }
 
-.col-7_0625rem {
-  width: 7.0625rem;
+  /*
+  Each column width below is a percentage proportional to the corresponding designed value, so it
+  can adjust responsively.
+  */
+
+  .col-6_75 {
+    width: calc( 100% * (var(--col-6_75-rem) + 2 * var(--padding-fixed-rem)) / var(--total));
+  }
+
+  .col-19_4375 {
+    width: calc( 100% * (var(--col-19_4375-rem) + 2 * var(--padding-fixed-rem)) / var(--total));
+  }
+
+  .col-14_75 {
+    width: calc( 100% * (var(--col-14_75-rem) + 2 * var(--padding-fixed-rem)) / var(--total));
+  }
+
+  .col-7_0625 {
+    width: calc( 100% * (var(--col-7_0625-rem) + 2 * var(--padding-fixed-rem)) / var(--total));
+  }
 }
 
-.padding-column {
+.col-padding {
   padding: 0;
-  width: 1.5rem;
+  width: calc(var(--col-padding-rem) * 1rem);
 }
 
 cds-pagination {
@@ -1520,6 +1563,7 @@ cds-pagination {
 
 cds-tag {
   margin: 0;
+  word-break: normal;
 }
 
 cds-header-panel[expanded] {
@@ -1879,9 +1923,6 @@ div.internal-grouping-01:has(svg.warning) span.body-compact-01 {
   .submission-details--title svg {
     width: 5rem;
   }
-  cds-table {
-    width: 82rem;
-  }
 
   .card {
     padding: 1.5rem;
@@ -1987,9 +2028,6 @@ div.internal-grouping-01:has(svg.warning) span.body-compact-01 {
   .paginator {
     width: 100%;
   }
-  cds-table {
-    width: 82rem;
-  }
 }
 
 /* Large (from 1056px to 1311px) */
@@ -2061,10 +2099,6 @@ div.internal-grouping-01:has(svg.warning) span.body-compact-01 {
     );
   }
 
-  cds-table {
-    min-width: 66rem;
-  }
-
   div.content:has(div.staff svg.submission-badge) {
     margin-left: 16rem;
   }

diff --git a/frontend/src/pages/SearchPage.vue b/frontend/src/pages/SearchPage.vue
@@ -251,13 +251,13 @@ onMounted(() => {
       <cds-table id="search-table" use-zebra-styles v-if="!loadingSearch">
         <cds-table-head>
           <cds-table-header-row>
-            <cds-table-header-cell class="padding-column" />
-            <cds-table-header-cell class="col-6_75rem">Client number</cds-table-header-cell>
-            <cds-table-header-cell class="col-6_75rem">Acronym</cds-table-header-cell>
-            <cds-table-header-cell class="col-19_4375rem">Name</cds-table-header-cell>
-            <cds-table-header-cell class="col-14_75rem">Type</cds-table-header-cell>
-            <cds-table-header-cell class="col-14_75rem">City</cds-table-header-cell>
-            <cds-table-header-cell class="col-7_0625rem">Status</cds-table-header-cell>
+            <cds-table-header-cell class="col-padding" />
+            <cds-table-header-cell class="col-6_75">Client number</cds-table-header-cell>
+            <cds-table-header-cell class="col-6_75">Acronym</cds-table-header-cell>
+            <cds-table-header-cell class="col-19_4375">Name</cds-table-header-cell>
+            <cds-table-header-cell class="col-14_75">Type</cds-table-header-cell>
+            <cds-table-header-cell class="col-14_75">City</cds-table-header-cell>
+            <cds-table-header-cell class="col-7_0625">Status</cds-table-header-cell>
           </cds-table-header-row>
         </cds-table-head>
         <cds-table-body>

diff --git a/frontend/src/pages/SubmissionListPage.vue b/frontend/src/pages/SubmissionListPage.vue
@@ -132,13 +132,13 @@ const summitSvg = useSvg(summit);
       <cds-table id="submissions-table" use-zebra-styles v-if="!loading">
         <cds-table-head>
           <cds-table-header-row>
-            <cds-table-header-cell class="padding-column" />
+            <cds-table-header-cell class="col-padding" />
             <cds-table-header-cell>Client name</cds-table-header-cell>
             <cds-table-header-cell>Client type</cds-table-header-cell>
             <cds-table-header-cell>District</cds-table-header-cell>
             <cds-table-header-cell>Submitted on</cds-table-header-cell>
             <cds-table-header-cell>Submission status</cds-table-header-cell>
-            <cds-table-header-cell class="padding-column" />
+            <cds-table-header-cell class="col-padding" />
           </cds-table-header-row>
         </cds-table-head>
         <cds-table-body>