fix(fe): fix data-table columns' width (#1289)

* fix: fix columns' width * refactor: create css class padding-column
bcgov · Oct 31, 2024 · 6c948d8 · 6c948d8
1 parent 79adc35
commit 6c948d8
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 15 deletions.
diff --git a/frontend/src/assets/styles/global.scss b/frontend/src/assets/styles/global.scss
@@ -1283,7 +1283,7 @@ cds-modal {
 }
 
 .paginator {
-  width: calc(100vw - 16rem);
+  width: 100%;
 }
 
 .headers-compact ~ .full {
@@ -1490,11 +1490,6 @@ cds-table-header-cell {
   background: var(--light-theme-layer-accent-layer-accent-01, #dfdfe1);
 }
 
-:is(cds-table-header-cell, cds-table-cell):is(:first-child, :last-child) {
-  padding: 0;
-  width: 1.5rem;
-}
-
 .col-6_75rem {
   width: 6.75rem;
 }
@@ -1511,6 +1506,11 @@ cds-table-header-cell {
   width: 7.0625rem;
 }
 
+.padding-column {
+  padding: 0;
+  width: 1.5rem;
+}
+
 cds-pagination {
   border-radius: 0px 0px 4px 4px;
   border-top: 1px solid var(--light-theme-border-border-subtle-01, #dfdfe1);
@@ -1874,7 +1874,7 @@ div.internal-grouping-01:has(svg.warning) span.body-compact-01 {
   }
 
   .paginator {
-    width: 100vw;
+    width: 100%;
   }
   .submission-details--title svg {
     width: 5rem;
@@ -1985,7 +1985,7 @@ div.internal-grouping-01:has(svg.warning) span.body-compact-01 {
   }
 
   .paginator {
-    width: 100vw;
+    width: 100%;
   }
   cds-table {
     width: 82rem;

diff --git a/frontend/src/pages/SearchPage.vue b/frontend/src/pages/SearchPage.vue
@@ -246,17 +246,16 @@ onMounted(() => {
     </div>
     <div id="datatable" v-if="userhasAuthority">
 
-      <cds-table use-zebra-styles v-if="!loadingSearch">
+      <cds-table id="search-table" use-zebra-styles v-if="!loadingSearch">
         <cds-table-head>
           <cds-table-header-row>
-            <cds-table-header-cell />
+            <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 />
           </cds-table-header-row>
         </cds-table-head>
         <cds-table-body>
@@ -276,7 +275,6 @@ onMounted(() => {
                 <cds-tag :type="tagColor(row.clientStatus)" title=""><span>{{ row.clientStatus }}</span></cds-tag>
               </div>
             </cds-table-cell>
-            <cds-table-cell />
           </cds-table-row>
         </cds-table-body>
       </cds-table>

diff --git a/frontend/src/pages/SubmissionListPage.vue b/frontend/src/pages/SubmissionListPage.vue
@@ -129,16 +129,16 @@ const summitSvg = useSvg(summit);
     </div>
 
     <div id="datatable" v-if="userhasAuthority">
-      <cds-table use-zebra-styles v-if="!loading">
+      <cds-table id="submissions-table" use-zebra-styles v-if="!loading">
         <cds-table-head>
           <cds-table-header-row>
-            <cds-table-header-cell />
+            <cds-table-header-cell class="padding-column" />
             <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 />
+            <cds-table-header-cell class="padding-column" />
           </cds-table-header-row>
         </cds-table-head>
         <cds-table-body>