From 113da76c3635659e936b5e36ff700f2d2ff79106 Mon Sep 17 00:00:00 2001
From: npeter83 <npeter83+claude@gmail.com>
Date: Fri, 25 Sep 2026 23:43:26 +0200
Subject: [PATCH] =?UTF-8?q?fix(design):=20a=20user=20row=20answers=20as=20?=
 =?UTF-8?q?a=20whole=20card=20=E2=80=94=20the=20hover=20layer=20under=20it?=
 =?UTF-8?q?s=20badges=20and=20buttons,=20a=20click=20anywhere=20opens=20th?=
 =?UTF-8?q?e=20account=20(E28)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The layer was the name button's own and ended at the row's first badge or button. The card now paints
the B3 layer under its content (isolate + a new z-under level), the name button's hit layer spans the
card, and the actions sit above it.
---
 docs/DESIGN.md                                |  7 ++++-
 frontend/eslint.config.js                     |  2 +-
 .../src/components/AdminUsers.dom.test.tsx    | 18 +++++++++++++
 frontend/src/components/AdminUsers.tsx        | 26 ++++++++++++++++---
 frontend/src/index.css                        |  3 +++
 5 files changed, 50 insertions(+), 6 deletions(-)

diff --git a/docs/DESIGN.md b/docs/DESIGN.md
index ca03b93e..e6106e80 100644
--- a/docs/DESIGN.md
+++ b/docs/DESIGN.md
@@ -100,6 +100,9 @@ style guide.
   `bg-card` hovers are violations (invisible on a light card). Selected stays the solid accent. The one
   exception is an edged pill (a chip, a toolbar or form trigger, a segment): its hover is the accent edge
   (`.pill:hover`, `glass-hover`), which reads on every surface too (owner decision F14).
+  A card that is one row with actions answers as a whole: the layer is the card's, under its badges and
+  buttons, and the row's open button spans the card beneath the actions (a hover that stopped at the first
+  badge read as broken; owner, E28 — `AdminUsers` user rows).
 - **Tokens as utilities:** the decided values live once in `index.css` — `--hover` / `--press`,
   `--edge-strong`, `--touch-target`, and the utilities `state-layer`, `state-filled`, `state-danger`,
   `edge-strong`, `fade-below`, `fade-below-panel`, `fade-above-panel`, `fade-edges-x`. A primitive or a lab
@@ -109,7 +112,8 @@ style guide.
 - **Radius:** chips and segmented controls `rounded-full`; tabs `rounded-lg`. Buttons, icon buttons and
   form fields `rounded-lg`; toolbar triggers and search a pill (Controls). Surfaces: see Surfaces.
 - **Layers:** the fixed z-index scale in `index.css` (`base < menu < chrome < paneltab < panel < rail <
-overlay < popover < tooltip`). No ad-hoc z-index. [maintainability]
+overlay < popover < tooltip`), plus `under`, a surface's own layer under its content inside its `isolate`.
+  No ad-hoc z-index. [maintainability]
 
 ## Controls — _Decided_ (batches A and B)
 
@@ -377,6 +381,7 @@ Wherever there is text, the user can select it and copy it, and no click action
 | 2026-09-25 | Edges and hovers (F14)      | The ≥ 3:1 edge on the field family (fields, the form trigger); labelled pills keep the faint edge and the accent-edge hover                                        | The ≥ 3:1 edge and a state-layer hover on every control                                               | 1.4.11 asks an edge only where nothing else identifies the control; a heavy edge on every chip and tab weighs the whole UI down                                      |
 | 2026-09-25 | Rating and live (F16)       | Own tokens: `--rating` (theme-scoped gold), `--live`/`--live-fg`, `--rating-media`, `--media-chrome`; palette classes lint-refused                                 | Map them to `--warn` / `--danger`                                                                     | A gold star and a red LIVE are what the eye expects; as warn/danger they would read as a status. The old amber score was 2:1 on light                                |
 | 2026-09-25 | Fjord trial (B2 exception)  | A fifth scheme, temporary: Midnight's neutrals, Playnite's steel accent (#337599 lifted to #5aa1cb) and steel rules; exit = fold into Midnight or remove           | Retune Midnight straight away; borrow only the qualities                                              | The owner wants to live with the calmer palette app-wide before it replaces the default; it breaks "own hue family" on purpose, and only until that call             |
+| 2026-09-25 | Whole-card row (owner)      | A card row's B3 layer is the card's `::before` under its content; the open button's hit layer spans the card, the actions sit above it                             | The name button's own hover, ending at the first badge or button                                      | A row that half-answers the pointer reads as broken; a badge click did nothing                                                                                       |
 | 2026-09-25 | Badge tones (F29)           | `Badge tone` neutral / accent / warn at 6%; light `--warn` #b45309 → #a14a07; edged label spans lint-refused                                                       | Keep edged status pills (a private Badge in Users, Settings "Granted", the suggestions count)         | Edged = pressable at a glance; amber-700 was 4.58:1 as text and fell under 4.5 on its own tint                                                                       |
 | 2026-09-24 | Chip family                 | One `Chip` (filter / token / tag / suggest / ghost) + `DismissibleChip`; nothing under 24; the lint rule "no raw `<button>` outside ui/"                           | Five chip geometries in five files                                                                    | The applied-filter row, the tag cells, the year picker and the saved-view editor each drew their own chip; a one-letter tag was 21px wide                            |
 | 2026-09-24 | Button families             | `Button` / `IconButton` / `Pressable` / chips / `DragHandle`; `lg` 40 for a hero CTA; pills and a 48 Play on media (from C5)                                       | Every button hand-painted                                                                             | 268 hand-rolled buttons in 79 files drifted into as many looks; the ladder only holds if every button stands on it                                                   |
diff --git a/frontend/eslint.config.js b/frontend/eslint.config.js
index 0b5ead40..443bce18 100644
--- a/frontend/eslint.config.js
+++ b/frontend/eslint.config.js
@@ -353,7 +353,7 @@ const BOX_PX_MESSAGE =
 // index.css). A numeric `z-10` equals a level today but doesn't follow it when the scale moves; name it.
 const Z_RAW = "/(^|[\\s:])-?z-([1-9]\\d*|\\[[^\\]]+\\])(?![\\w-])/";
 const Z_RAW_MESSAGE =
-  "z-index off the layer scale: use a named level (z-base, z-menu, z-chrome, z-panel, z-rail, z-overlay, z-popover, z-tooltip), not z-N or z-[…].";
+  "z-index off the layer scale: use a named level (z-under, z-base, z-menu, z-chrome, z-panel, z-rail, z-overlay, z-popover, z-tooltip), not z-N or z-[…].";
 
 // A hover that swaps a colour instead of laying the B3 state layer (DESIGN.md Tokens): `bg-card`,
 // `bg-border` and `bg-surface` vanish on a light card, an opacity dim reads as "disabled", and
diff --git a/frontend/src/components/AdminUsers.dom.test.tsx b/frontend/src/components/AdminUsers.dom.test.tsx
index 590a31a4..2a6fcd94 100644
--- a/frontend/src/components/AdminUsers.dom.test.tsx
+++ b/frontend/src/components/AdminUsers.dom.test.tsx
@@ -98,6 +98,24 @@ describe("the last sign-in column (E22 S1)", () => {
   });
 });
 
+// E28 (owner): the hover ended wherever the row's first badge or button began, because the layer was
+// the name button's own. The card is the row: it paints the layer under its content, and the name
+// button's hit layer spans the card, under the actions that sit above it.
+describe("a user row", () => {
+  it("answers as a whole card, with its actions above the card's hit layer", async () => {
+    mount();
+    const open = await screen.findByTitle("users.account.open");
+    const card = open.parentElement!;
+    expect(card.className).toMatch(/(^|\s)isolate(\s|$)/);
+    expect(card.className).toMatch(/(^|\s)hover:before:bg-\(--hover\)(\s|$)/);
+    expect(open.className).toMatch(/(^|\s)after:inset-0(\s|$)/);
+    expect(open.className).not.toMatch(/selectable|hover:/);
+    const actions = [...card.querySelectorAll("button")].filter((b) => b !== open);
+    expect(actions.length).toBeGreaterThan(0);
+    for (const b of actions) expect(b.className).toMatch(/(^|\s)relative(\s|$)/);
+  });
+});
+
 describe("a user action that fails", () => {
   it("says a user who is gone, and refetches the list", async () => {
     const users = mount();
diff --git a/frontend/src/components/AdminUsers.tsx b/frontend/src/components/AdminUsers.tsx
index a4edcf69..55247634 100644
--- a/frontend/src/components/AdminUsers.tsx
+++ b/frontend/src/components/AdminUsers.tsx
@@ -54,6 +54,13 @@ import { SURFACE } from "./ui/surfaces";
 // (The tab key + a "focus the Access tab" helper live in lib/adminUsersTab so callers can
 // pre-select the tab without importing this lazy-loaded page — see that file.)
 
+// A user row's B3 layer (DESIGN.md "State layers"), painted by the card under its content, and the name
+// button's stretched hit layer over the whole card. Why the row is built so: at the row below.
+const ROW_LAYER =
+  "relative isolate before:absolute before:inset-0 before:z-under before:rounded-[inherit] before:transition-colors before:content-[''] hover:before:bg-(--hover) has-[[data-row-open]:active]:before:bg-(--press)";
+const ROW_OPEN =
+  "focus-visible:outline-none after:absolute after:inset-0 after:rounded-xl after:content-[''] focus-visible:after:outline-2 focus-visible:after:-outline-offset-2 focus-visible:after:outline-accent";
+
 export default function AdminUsers() {
   const me = useMe();
   const { t } = useTranslation();
@@ -215,11 +222,20 @@ function UsersRoles({ me }: { me: Me }) {
           {rows.map((u) => {
             const self = u.id === me.id;
             return (
-              <div key={u.id} className={`${SURFACE.card} flex items-center gap-2.5 p-2.5`}>
+              // The whole card is the row, so the whole card answers (owner, E28): the name's button
+              // stretches an invisible layer over the card (`after:inset-0`), so a click on a badge or
+              // a gap opens the account too, and the B3 hover layer is the card's own `::before`, under
+              // the badges and buttons (`isolate` + `z-under`). The actions are `relative`, above the
+              // stretched layer. The hover used to be the name button's own and ended at the first badge.
+              <div
+                key={u.id}
+                className={`${SURFACE.card} ${ROW_LAYER} flex items-center gap-2.5 p-2.5`}
+              >
                 <Pressable
+                  data-row-open=""
                   onClick={() => setPanelFor(u)}
                   title={t("users.account.open")}
-                  className="selectable cursor-pointer min-w-0 flex-1 rounded-lg -m-1 p-1"
+                  className={`min-w-0 flex-1 cursor-pointer ${ROW_OPEN}`}
                 >
                   <div className="text-sm truncate">
                     {displayName(u)}
@@ -251,7 +267,7 @@ function UsersRoles({ me }: { me: Me }) {
                   <Button
                     variant="glass"
                     size="xs"
-                    className="shrink-0"
+                    className="relative shrink-0"
                     onClick={() => onToggle(u)}
                     // Locked (demo / self) is unavailable WITH a reason, the tooltip's: aria-disabled keeps it
                     // focusable so a keyboard user reaches the reason. A pending write is transient.
@@ -281,6 +297,7 @@ function UsersRoles({ me }: { me: Me }) {
                     }
                     size="sm"
                     variant={u.is_suspended ? "outline-warn" : "outline"}
+                    className="relative"
                     onClick={() => onSuspend(u)}
                     aria-disabled={u.is_demo || self}
                     disabled={pendingIds.has(u.id)}
@@ -301,6 +318,7 @@ function UsersRoles({ me }: { me: Me }) {
                     label={t("users.delete.action")}
                     size="sm"
                     variant="outline-danger"
+                    className="relative"
                     onClick={() => onDelete(u)}
                     aria-disabled={u.is_demo || self}
                     disabled={pendingIds.has(u.id)}
@@ -321,7 +339,7 @@ function UsersRoles({ me }: { me: Me }) {
                         : t("users.roles.lastLoginNone")
                   }
                 >
-                  <span className="hidden sm:inline-block w-20 shrink-0 text-right text-2xs text-muted tabular-nums">
+                  <span className="relative hidden sm:inline-block w-20 shrink-0 text-right text-2xs text-muted tabular-nums">
                     {u.last_login_at ? relativeTime(u.last_login_at) : "—"}
                   </span>
                 </Tooltip>
diff --git a/frontend/src/index.css b/frontend/src/index.css
index aafe147f..3ac3526a 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -48,6 +48,9 @@
 
   --font-sans: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
 
+  /* `under` is not an app layer: a surface's own layer painted under its content, inside that surface's
+     `isolate` stacking context (a whole-card row's hover layer, DESIGN.md State layers). */
+  --z-index-under: -1;
   --z-index-base: 10;
   --z-index-menu: 20;
   --z-index-chrome: 30;