From 7ff1ec1db0b98384e5522c0f870b0982093250f9 Mon Sep 17 00:00:00 2001
From: npeter83 <npeter83+claude@gmail.com>
Date: Mon, 10 Aug 2026 23:25:21 +0200
Subject: [PATCH] =?UTF-8?q?fix(ui):=20R10=20S4=20review=20=E2=80=94=20guar?=
 =?UTF-8?q?d=20.is-current=20against=20aria-current=3D"false"=20+=20shadow?=
 =?UTF-8?q?=20transition?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Follow-ups from the /code-review pass:
- .is-current[aria-current] now excludes aria-current="false" — the recipe is a
  shared primitive and a consumer using the common `x ? "true" : "false"` idiom
  would otherwise paint a non-current row as current.
- add box-shadow to the .pill/.is-current transition so the Tabs/SettingsPanel
  on-state shadow fades in instead of popping (it lost the utility `transition`).
- document that .chip-solid is intentionally paint-only (composes on a site's own
  geometry) so a truncating single-element chip isn't forced into inline-flex.

The 3 intentional visual changes (hover-border 55%, tag-filter transparent
resting, RemovableChip tint+border) were UAT-accepted as-is. PlexSidebar's facet
Chip (glass-card resting) deferred — wants a .pill soft-glass variant.
---
 frontend/src/index.css | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/frontend/src/index.css b/frontend/src/index.css
index 2b7aa179..560b6b4c 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -438,7 +438,8 @@ body {
     transition:
       color 0.15s ease,
       background-color 0.15s ease,
-      border-color 0.15s ease;
+      border-color 0.15s ease,
+      box-shadow 0.15s ease; /* so an on-state shadow (Tabs/SettingsPanel) fades in, not pops */
   }
   .pill:hover,
   .is-current:hover {
@@ -450,9 +451,11 @@ body {
   .is-current:hover {
     background-color: var(--card);
   }
-  /* selected / current — SOLID accent fill (the dominant idiom) */
+  /* selected / current — SOLID accent fill (the dominant idiom). The `:not([aria-current="false"])`
+     guard matters: `.is-current` is a shared primitive and a consumer using the common
+     `aria-current={x ? "true" : "false"}` idiom would otherwise paint a NON-current row as current. */
   .pill[aria-pressed="true"],
-  .is-current[aria-current] {
+  .is-current[aria-current]:not([aria-current="false"]) {
     background-color: var(--accent);
     color: var(--accent-fg);
     border-color: var(--accent);
@@ -465,9 +468,13 @@ body {
     border-color: color-mix(in srgb, var(--accent) 40%, transparent);
   }
 
-  /* .chip — an applied tag / filter token (rounded, tinted). The tint is the resting look (a filter
-     is "on" whenever the chip exists); removable variants add their own × button as a child.
-     .chip-solid = the strong-fill token (an applied tag colour, a picked channel). */
+  /* .chip — an applied tag / filter token (rounded, tinted, self-contained: display + geometry +
+     paint). The tint is the resting look (a filter is "on" whenever the chip exists); removable
+     variants add their own × button as a child.
+     .chip-solid is intentionally a PAINT-ONLY modifier (bg/text/border colour, no display or
+     geometry): it sits on a site's OWN chip geometry so a truncating single-element chip
+     (ChannelTags) isn't forced into inline-flex, which would break its text-overflow. Use it WITH a
+     site's `rounded-full`/`border` utilities (or on top of `.chip`), never bare. */
   .chip {
     display: inline-flex;
     align-items: center;