Fix table grid column CSS variable, superadmin list menus being hidden/inoperable, and various other table tweaks (#2573)

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

@@ -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,6 +115,7 @@ export class OrgsList extends BtrixElement {
           library="default"
         ></sl-icon
       ></sl-input>
+      <div class="-mx-3 overflow-x-auto px-3">
         <btrix-table>
           <btrix-table-head class="mb-2">
             <btrix-table-header-cell>
@@ -143,6 +144,7 @@ export class OrgsList extends BtrixElement {
             ${orgs?.map(this.renderOrg)}
           </btrix-table-body>
         </btrix-table>
+      </div>
 
       ${this.renderOrgQuotas()} ${this.renderOrgProxies()}
       ${this.renderOrgReadOnly()} ${this.renderOrgDelete()}

frontend/src/components/ui/overflow-dropdown.ts

@@ -50,7 +50,11 @@ export class OverflowDropdown extends TailwindElement {
         hoist
         distance=${ifDefined(this.raised ? "4" : undefined)}
       >
-        <btrix-button slot="trigger" ?raised=${this.raised} size=${this.size}>
+        <btrix-button
+          slot="trigger"
+          ?raised=${this.raised}
+          size=${ifDefined(this.size)}
+        >
           <sl-icon
             label=${msg("Actions")}
             name="three-dots-vertical"

frontend/src/components/ui/table/table.ts

@@ -38,7 +38,8 @@ export class Table extends LitElement {
     :host {
       display: grid;
       column-gap: var(--btrix-table-column-gap, 0);
-      grid-template-columns: var(--btrix-table-grid-template-columns);
+      grid-template-columns: var(--btrix-table-grid-template-columns--internal);
+      min-width: min-content;
     }
   `;
 
@@ -57,14 +58,12 @@ export class Table extends LitElement {
     if (!headEl) return;
     await headEl.updateComplete;
 
-    if (!this.style.getPropertyValue("--btrix-table-grid-template-columns")) {
     // `grid-template-columns` must be defined in order for spanning all
     // columns in a subgrid to work.
     // See https://github.com/w3c/csswg-drafts/issues/2402
     this.style.setProperty(
-        "--btrix-table-grid-template-columns",
+      "--btrix-table-grid-template-columns--internal",
-        `repeat(${headEl.colCount}, auto)`,
+      `var(--btrix-table-grid-template-columns, repeat(${headEl.colCount}, auto))`,
     );
   }
 }
-}

frontend/src/features/archived-items/archived-item-list.ts

@@ -446,12 +446,12 @@ export class ArchivedItemList extends TailwindElement {
     return html`
       <style>
         btrix-table {
-          grid-template-columns: ${headerCols
+          --btrix-table-grid-template-columns: ${headerCols
             .map(({ cssCol }) => cssCol)
             .join(" ")};
         }
       </style>
-      <div class="overflow-auto">
+      <div class="-mx-5 overflow-auto px-5">
         <btrix-table>
           <btrix-table-head class="mb-2">
             <slot

frontend/src/features/archived-items/crawl-list.ts

@@ -278,10 +278,9 @@ export class CrawlList extends TailwindElement {
   render() {
     return html` <style>
         btrix-table {
-          grid-template-columns:
+          --btrix-table-grid-template-columns: min-content [clickable-start]
-            min-content [clickable-start]
+            ${this.workflowId ? "" : `auto `}auto auto auto auto auto auto
-            ${this.workflowId ? "" : `auto `}auto auto
+            [clickable-end] min-content;
-            auto auto auto auto [clickable-end] min-content;
         }
       </style>
       <div class="overflow-auto">

frontend/src/pages/org/archived-item-detail/ui/qa.ts

@@ -752,7 +752,7 @@ export class ArchivedItemDetailQA extends BtrixElement {
     return html`
       <btrix-table
         class="-mx-3 overflow-x-auto px-5"
-        style="grid-template-columns: ${[
+        style="--btrix-table-grid-template-columns: ${[
           "[clickable-start] minmax(12rem, auto)",
           "minmax(min-content, 12rem)",
           "minmax(min-content, 12rem) [clickable-end]",

frontend/src/pages/org/browser-profiles-list.ts

@@ -56,9 +56,8 @@ export class BrowserProfilesList extends BtrixElement {
 
   static styles = css`
     btrix-table {
-      grid-template-columns:
+      --btrix-table-grid-template-columns: [clickable-start] minmax(30ch, 50ch)
-        [clickable-start] minmax(30ch, 50ch) minmax(30ch, 40ch) repeat(2, 1fr)
+        minmax(30ch, 40ch) repeat(2, 1fr) [clickable-end] min-content;
-        [clickable-end] min-content;
       --btrix-table-cell-gap: var(--sl-spacing-x-small);
       --btrix-table-cell-padding-x: var(--sl-spacing-small);
     }

frontend/src/pages/org/collections-list.ts

@@ -480,7 +480,7 @@ export class CollectionsList extends BtrixElement {
       return html`
         <btrix-table
           class="[--btrix-table-column-gap:var(--sl-spacing-small)]"
-          style="grid-template-columns: min-content [clickable-start] 45em repeat(4, 1fr) [clickable-end] min-content"
+          style="--btrix-table-grid-template-columns: min-content [clickable-start] minmax(min-content, 45em) repeat(4, 1fr) [clickable-end] min-content"
         >
           <btrix-table-head class="mb-2 mt-1 whitespace-nowrap">
             <btrix-table-header-cell>