Small UI fixes (#1934)

Fixes a few things that have been bugging me:

- Overflow buttons in list view now (mostly) take up the their full cell
area, instead of there being a couple pixels around the button where
clicking would do nothing or cause navigation

  - | before | after |
    | --- | --- |
| <img width="238" alt="Screenshot 2024-07-16 at 3 35 25 PM"
src="https://github.com/user-attachments/assets/afbda6d6-703b-4ed8-96be-a9c37660430d">
| <img width="236" alt="Screenshot 2024-07-16 at 3 35 02 PM"
src="https://github.com/user-attachments/assets/417a326a-08d2-42b2-85c3-fa007ea3bff8">
|

- Changes the class that `tab-list` uses internally so that it doesn't
conflict with Tailwind's `container` class, which prevents the tab
content from being limited at the default Tailwind container width
- Adds a couple of Tailwind plugins for styling CSS parts
(`part-[...]:`) and for arbitrary attributes (`attr-[...]:`)

frontend/config/tailwind/plugins/attributes.js

@@ -0,0 +1,4 @@
+const plugin = require("tailwindcss/plugin");
+module.exports = plugin(function ({ matchVariant }) {
+  matchVariant("attr", (value) => `&[${value}]`);
+});

frontend/config/tailwind/plugins/parts.js

@@ -0,0 +1,4 @@
+const plugin = require("tailwindcss/plugin");
+module.exports = plugin(function ({ matchVariant }) {
+  matchVariant("part", (value) => `&::part(${value})`);
+});

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

@@ -1,6 +1,6 @@
 import { localized, msg } from "@lit/localize";
 import type { SlDropdown, SlMenu } from "@shoelace-style/shoelace";
-import { css, html, LitElement } from "lit";
+import { html } from "lit";
 import {
   customElement,
   query,
@@ -8,6 +8,8 @@ import {
   state,
 } from "lit/decorators.js";
 
+import { TailwindElement } from "@/classes/TailwindElement";
+
 /**
  * Dropdown for additional actions.
  *
@@ -23,19 +25,7 @@ import {
  */
 @localized()
 @customElement("btrix-overflow-dropdown")
-export class OverflowDropdown extends LitElement {
+export class OverflowDropdown extends TailwindElement {
-  static style = [
-    css`
-      .trigger {
-        font-size: 1rem;
-      }
-
-      .trigger[disabled] {
-        visibility: hidden;
-      }
-    `,
-  ];
-
   @state()
   private hasMenuItems?: boolean;
 
@@ -50,7 +40,7 @@ export class OverflowDropdown extends LitElement {
       <sl-dropdown ?disabled=${!this.hasMenuItems} hoist>
         <sl-icon-button
           slot="trigger"
-          class="trigger"
+          class="font-base attr-[disabled]:invisible part-[base]:p-3"
           label=${msg("Actions")}
           name="three-dots-vertical"
           ?disabled=${!this.hasMenuItems}

frontend/src/components/ui/tab-list.ts

@@ -83,7 +83,7 @@ export class TabList extends TailwindElement {
       --track-width: 4px;
     }
 
-    .container {
+    .btrix-tab-list-container {
       display: grid;
       grid-template-areas:
         "menu"
@@ -94,7 +94,7 @@ export class TabList extends TailwindElement {
     }
 
     @media only screen and (min-width: ${TWO_COL_SCREEN_MIN_CSS}) {
-      .container {
+      .btrix-tab-list-container {
         grid-template-areas:
           ". header"
           "menu main";
@@ -227,7 +227,7 @@ export class TabList extends TailwindElement {
 
   render() {
     return html`
-      <div class="container">
+      <div class="btrix-tab-list-container">
         <div class="navWrapper min-w-0">${this.renderNav()}</div>
         <div class="header"><slot name="header"></slot></div>
         <div class="content">

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

@@ -329,7 +329,7 @@ export class ArchivedItemDetailQA extends TailwindElement {
               <btrix-table-header-cell>
                 ${msg("Started by")}
               </btrix-table-header-cell>
-              <btrix-table-header-cell class="px-1">
+              <btrix-table-header-cell class="px-0">
                 <span class="sr-only">${msg("Row actions")}</span>
               </btrix-table-header-cell>
             </btrix-table-head>
@@ -389,7 +389,7 @@ export class ArchivedItemDetailQA extends TailwindElement {
               : notApplicable()}
           </btrix-table-cell>
           <btrix-table-cell>${run.userName}</btrix-table-cell>
-          <btrix-table-cell class="px-1">
+          <btrix-table-cell class="p-0">
             <div class="col action">
               <btrix-overflow-dropdown
                 @sl-show=${async (e: SlShowEvent) => {

frontend/src/pages/org/archived-items.ts

@@ -389,7 +389,7 @@ export class CrawlsList extends TailwindElement {
       ${items.length
         ? html`
             <btrix-archived-item-list .listType=${this.itemType}>
-              <btrix-table-header-cell slot="actionCell" class="px-1">
+              <btrix-table-header-cell slot="actionCell" class="p-0">
                 <span class="sr-only">${msg("Row actions")}</span>
               </btrix-table-header-cell>
               ${repeat(items, ({ id }) => id, this.renderArchivedItem)}
@@ -602,7 +602,7 @@ export class CrawlsList extends TailwindElement {
       .item=${item}
       ?showStatus=${this.itemType !== null}
     >
-      <btrix-table-cell slot="actionCell" class="px-1">
+      <btrix-table-cell slot="actionCell" class="p-0">
         <btrix-overflow-dropdown
           @click=${(e: MouseEvent) => {
             // Prevent navigation to detail view

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

@@ -327,7 +327,7 @@ export class BrowserProfilesList extends TailwindElement {
             ></sl-format-date>
           </sl-tooltip>
         </btrix-table-cell>
-        <btrix-table-cell class="px-1">
+        <btrix-table-cell class="p-0">
           ${this.renderActions(data)}
         </btrix-table-cell>
       </btrix-table-row>

frontend/src/pages/org/collection-detail.ts

@@ -643,7 +643,7 @@ export class CollectionDetail extends LiteElement {
 
     return html`
       <btrix-archived-item-list>
-        <btrix-table-header-cell slot="actionCell" class="px-1">
+        <btrix-table-header-cell slot="actionCell" class="p-0">
           <span class="sr-only">${msg("Row actions")}</span>
         </btrix-table-header-cell>
         ${repeat(
@@ -677,7 +677,7 @@ export class CollectionDetail extends LiteElement {
     >
       ${this.isCrawler
         ? html`
-            <btrix-table-cell slot="actionCell" class="px-1">
+            <btrix-table-cell slot="actionCell" class="p-0">
               <btrix-overflow-dropdown
                 @click=${(e: MouseEvent) => {
                   // Prevent navigation to detail view

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

@@ -553,7 +553,7 @@ export class CollectionsList extends LiteElement {
           minute="2-digit"
         ></sl-format-date>
       </btrix-table-cell>
-      <btrix-table-cell class="px-1">
+      <btrix-table-cell class="p-0">
         ${this.isCrawler ? this.renderActions(col) : ""}
       </btrix-table-cell>
     </btrix-table-row>

frontend/tailwind.config.js

@@ -1,7 +1,9 @@
 const { tailwindTransform } = require("postcss-lit");
 
+const attributes = require("./config/tailwind/plugins/attributes");
 const containPlugin = require("./config/tailwind/plugins/contain");
 const contentVisibilityPlugin = require("./config/tailwind/plugins/content-visibility");
+const cssPartsPlugin = require("./config/tailwind/plugins/parts");
 
 const PRIMARY_COLOR = "#0891B2";
 
@@ -163,7 +165,9 @@ module.exports = {
 
   plugins: [
     require("@tailwindcss/container-queries"),
+    attributes,
     containPlugin,
     contentVisibilityPlugin,
+    cssPartsPlugin,
   ],
 };