fix: fix columns' width

bcgov · Oct 30, 2024 · 2765b3d · 2765b3d
1 parent 82759fa
commit 2765b3d
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 10 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,9 +1490,18 @@ 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;
+#submissions-table {
+  :is(cds-table-header-cell, cds-table-cell):is(:first-child, :last-child) {
+    padding: 0;
+    width: 1.5rem;
+  }
+}
+
+#search-table {
+  :is(cds-table-header-cell, cds-table-cell):is(:first-child) {
+    padding: 0;
+    width: 1.5rem;
+  }
 }
 
 .col-6_75rem {
@@ -1874,7 +1883,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 +1994,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,7 +246,7 @@ 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 />
@@ -256,7 +256,6 @@ onMounted(() => {
             <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,7 +129,7 @@ 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 />