diff --git a/frontend/src/assets/styles/global.scss b/frontend/src/assets/styles/global.scss index 2fb561569..1d2847927 100644 --- 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 index 1a48b48a5..b0972d4f4 100644 --- a/frontend/src/pages/SearchPage.vue +++ b/frontend/src/pages/SearchPage.vue @@ -251,13 +251,13 @@ onMounted(() => { - - Client number - Acronym - Name - Type - City - Status + + Client number + Acronym + Name + Type + City + Status diff --git a/frontend/src/pages/SubmissionListPage.vue b/frontend/src/pages/SubmissionListPage.vue index 029f21b50..712f960cc 100644 --- a/frontend/src/pages/SubmissionListPage.vue +++ b/frontend/src/pages/SubmissionListPage.vue @@ -132,13 +132,13 @@ const summitSvg = useSvg(summit); - + Client name Client type District Submitted on Submission status - +