From 8a707e3b3a6d9e42e649c6bdd86e0e602d871b23 Mon Sep 17 00:00:00 2001 From: Emma Segal-Grossman Date: Tue, 29 Apr 2025 21:00:16 -0400 Subject: [PATCH] Fix table grid column CSS variable, superadmin list menus being hidden/inoperable, and various other table tweaks (#2573) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Closes #2574 cc @SuaYoo ## Changes This adds an internal `--btrix-table-grid-template-columns--internal` css property to `btrix-table` to set table grid cols, which uses the `--btrix-table-grid-template-columns` value if defined and otherwise defaults to the number of header cols **from within the css declaration**, rather than using JS. In Chrome at least, `this.style.getPropertyValue` wasn't picking up on css variables defined outside of the custom component boundary, so this gets around that. Other changes: - Adds an additional column to the superadmin org list, as it was missing one - Fixes `overflow-dropdown` unintentionally setting its internal button's size to `undefined` if `size` wasn't set on it - Swaps the remaining tables to use `--btrix-table-grid-template-columns` instead of directly setting `grid-template-columns` - Adds a min-width of `min-content` to the table container, because doing so is necessary for left/right scrolling, and this is a common enough pattern it seems that upstreaming this into the table itself makes sense — it shouldn't cause breakages, this already generally is the expected behaviour - Allows tables to scroll left/right when necessary - Fix padding/margin for a few left/right scrolling tables - Allows primary column of collections list to shrink to a smaller min width ## Testing Test that none of the other tables are broken. I couldn't find any! --- frontend/src/components/orgs-list.ts | 60 ++++++++++--------- .../src/components/ui/overflow-dropdown.ts | 6 +- frontend/src/components/ui/table/table.ts | 19 +++--- .../archived-items/archived-item-list.ts | 4 +- .../src/features/archived-items/crawl-list.ts | 7 +-- .../pages/org/archived-item-detail/ui/qa.ts | 2 +- .../src/pages/org/browser-profiles-list.ts | 5 +- frontend/src/pages/org/collections-list.ts | 2 +- 8 files changed, 54 insertions(+), 51 deletions(-) diff --git a/frontend/src/components/orgs-list.ts b/frontend/src/components/orgs-list.ts index c79f38ee..9c87bbcd 100644 --- a/frontend/src/components/orgs-list.ts +++ b/frontend/src/components/orgs-list.ts @@ -28,7 +28,7 @@ export class OrgsList extends BtrixElement { static styles = css` btrix-table { --btrix-table-grid-template-columns: min-content [clickable-start] - minmax(auto, 50ch) auto auto auto [clickable-end] min-content; + minmax(auto, 50ch) auto auto auto auto [clickable-end] min-content; } `; @@ -115,34 +115,36 @@ export class OrgsList extends BtrixElement { library="default" > - - - - ${msg("Status")} - - - ${msg("Name")} - - - ${msg("Created")} - - - ${msg("Members")} - - - ${msg("Bytes Stored")} - - - ${msg("Last Crawl")} - - - ${msg("Actions")} - - - - ${orgs?.map(this.renderOrg)} - - +
+ + + + ${msg("Status")} + + + ${msg("Name")} + + + ${msg("Created")} + + + ${msg("Members")} + + + ${msg("Bytes Stored")} + + + ${msg("Last Crawl")} + + + ${msg("Actions")} + + + + ${orgs?.map(this.renderOrg)} + + +
${this.renderOrgQuotas()} ${this.renderOrgProxies()} ${this.renderOrgReadOnly()} ${this.renderOrgDelete()} diff --git a/frontend/src/components/ui/overflow-dropdown.ts b/frontend/src/components/ui/overflow-dropdown.ts index fa944692..79c5b526 100644 --- a/frontend/src/components/ui/overflow-dropdown.ts +++ b/frontend/src/components/ui/overflow-dropdown.ts @@ -50,7 +50,11 @@ export class OverflowDropdown extends TailwindElement { hoist distance=${ifDefined(this.raised ? "4" : undefined)} > - + btrix-table { - grid-template-columns: ${headerCols + --btrix-table-grid-template-columns: ${headerCols .map(({ cssCol }) => cssCol) .join(" ")}; } -
+
btrix-table { - grid-template-columns: - min-content [clickable-start] - ${this.workflowId ? "" : `auto `}auto auto - auto auto auto auto [clickable-end] min-content; + --btrix-table-grid-template-columns: min-content [clickable-start] + ${this.workflowId ? "" : `auto `}auto auto auto auto auto auto + [clickable-end] min-content; }
diff --git a/frontend/src/pages/org/archived-item-detail/ui/qa.ts b/frontend/src/pages/org/archived-item-detail/ui/qa.ts index 2a48146f..6144d776 100644 --- a/frontend/src/pages/org/archived-item-detail/ui/qa.ts +++ b/frontend/src/pages/org/archived-item-detail/ui/qa.ts @@ -752,7 +752,7 @@ export class ArchivedItemDetailQA extends BtrixElement { return html`