UI/CSS fixes: focus rings, search fields, column dropdown, theme accordion (#954)

* fix(focus): keyboard focus ring no longer clipped by overflow or cover The global :focus-visible ring used a positive outline-offset, so it was drawn outside the element and clipped by any ancestor with overflow:hidden or a scroll container (cards, rails, player bar, queue strip). Draw it inset instead via shared --focus-ring-* variables (single source). Cards draw the ring as an overlay above the cover, since a cover's own stacking context (transform/contain for render stability) would otherwise paint over an inset outline. Dracula now only sets --focus-ring-color. * refactor(focus): fold scattered focus-ring overrides onto shared knob Six components declared their own :focus-visible outline (mostly an exact copy of the old global ring). Remove the redundant ones so they inherit the global inset ring; keep the custom-coloured ones (genre pill, playback-delay modal) but source width/offset from --focus-ring-*; move the because-card ring to the central card focus ring (it has a cover and needs the lifted treatment). * fix(settings): round theme accordion inner box to match its section The theme picker's inner accordion had square corners, so the first (open) group header ran flush into the rounded Theme card. Give .theme-accordion a border-radius + overflow:hidden so its top/bottom corners continue the parent card's rounding, matching the other settings sections. * fix(search): unify search fields to one look Live-search, Help and Settings search differed (pill vs rounded-rect, glow vs plain border-change, mismatched backgrounds). Align them on the canonical input look: radius-md, ctp-base background, accent border + soft accent-dim focus glow. Drop the live-search pill radius, and suppress the input's own inset ring so only the outer cluster glow shows (no double ring). * fix(tracklist): column picker menu no longer clipped on short lists The column-visibility dropdown was an absolutely-positioned menu inside the tracklist, so a short list (e.g. a one-song Favorites view) clipped it via the ancestor's overflow box. Render the menu in a portal to <body> with fixed positioning anchored to the trigger (flips above when there's no room below), following on scroll/resize. Outside-click + Escape close now live in the shared TracklistColumnPicker (the menu is portalled out of the wrapper, so the old wrapper-only check would have closed it on every in-menu click). Fixes albums, playlists and favorites in one shared place. Adds a behaviour test. * docs(changelog): UI/CSS fixes pass (#954)
2026-07-22 15:25:46 +00:00 · 2026-06-02 21:43:09 +02:00
parent cc04a0c93d
commit 40932d28e2
16 changed files with 252 additions and 55 deletions
@@ -19,10 +19,6 @@
  border-color: var(--accent);
  background: var(--bg-hover);
 }
-.custom-select-trigger:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: 2px;
-}
 .custom-select-label {
  flex: 1;
  overflow: hidden;
@@ -19,8 +19,3 @@
 .filter-quick-clear--on-active-chip:hover {
  background: color-mix(in srgb, var(--ctp-crust) 22%, transparent);
 }
-
-.filter-quick-clear:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: 1px;
-}
@@ -31,7 +31,7 @@
 }

 .genre-pill:focus-visible {
-  outline: 2px solid var(--genre-color, var(--accent));
-  outline-offset: 2px;
+  outline: var(--focus-ring-width) solid var(--genre-color, var(--focus-ring-color));
+  outline-offset: var(--focus-ring-offset);
 }

@@ -15,16 +15,17 @@
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
-  background: var(--bg-card);
-  border: 1px solid var(--border-subtle);
+  background: var(--ctp-base);
+  border: 1px solid var(--ctp-overlay0);
  border-radius: var(--radius-md);
  width: 280px;
  max-width: 100%;
-  transition: border-color var(--transition-fast);
+  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
 }

 .help-search:focus-within {
  border-color: var(--accent);
+  box-shadow: 0 0 0 3px var(--accent-dim);
 }

 .help-search-icon {
@@ -77,6 +78,10 @@
 .theme-accordion {
  display: flex;
  flex-direction: column;
+  /* Round the inner box so the first header / last content corners continue the
+     parent card's rounding instead of running square into it. */
+  border-radius: var(--radius-md);
+  overflow: hidden;
 }

 .theme-accordion-item {
@@ -89,11 +89,6 @@
  transform: scale(1.05);
 }

-.hero-nav-arrow:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: 2px;
-}
-
 .hero-overlay {
  position: absolute;
  inset: 0;
@@ -95,7 +95,7 @@
  min-width: 0;
  background: var(--ctp-base);
  border: 1px solid var(--ctp-overlay0);
-  border-radius: var(--radius-full);
+  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
 }

@@ -149,7 +149,7 @@
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
-  border-radius: var(--radius-full) !important;
+  border-radius: var(--radius-md) !important;
  flex: 1;
  min-width: 0;
 }
@@ -157,6 +157,9 @@
 .live-search-field:focus {
  border-color: transparent !important;
  box-shadow: none !important;
+  /* The cluster shows the focus ring (:focus-within); suppress the input's own
+     ring so there isn't a second inner pill inside it. */
+  outline: none;
 }

 .live-search-adv-btn {
@@ -1735,10 +1735,7 @@
  background: var(--bg-hover, var(--bg-card));
  border-color: var(--accent, var(--border-subtle));
 }
-.because-card:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: 2px;
-}
+/* Focus ring handled centrally in card.css (lifted above the cover). */
 .because-card-cover-wrap {
  position: relative;
  flex: 0 0 auto;
@@ -60,8 +60,8 @@
 }

 .playback-delay-modal > .modal-close:focus-visible {
-  outline: 2px solid color-mix(in srgb, var(--pd-accent, var(--accent)) 60%, transparent);
-  outline-offset: 2px;
+  outline: var(--focus-ring-width) solid color-mix(in srgb, var(--pd-accent, var(--accent)) 60%, transparent);
+  outline-offset: var(--focus-ring-offset);
 }

 .playback-delay-modal > .modal-close:active {
@@ -135,15 +135,15 @@
 }

 .tracklist-col-picker-menu {
-  position: absolute;
-  top: calc(100% + 4px);
-  right: 0;
+  /* Positioned inline (fixed) and portalled to <body> so no ancestor overflow
+     can clip it; see TracklistColumnPicker. */
  background: var(--bg-card);
  border: 1px solid var(--ctp-surface1);
  border-radius: var(--radius-md);
  padding: 6px;
  min-width: 160px;
-  z-index: 200;
+  max-height: calc(100vh - 16px);
+  overflow-y: auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
 }

@@ -1,5 +1,6 @@
 /* ─── Card ─── */
 .card {
+  position: relative;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
@@ -11,3 +12,32 @@
  box-shadow: inset 0 0 0 1px var(--border), var(--shadow-md);
 }

+/* Card focus ring. A card's cover forms its own stacking context (transform/
+   contain for render stability), so the inset global :focus-visible outline gets
+   painted UNDER the cover. Cards instead draw the ring as a lifted overlay above
+   the cover, using the same --focus-ring-* knob as everything else. */
+.card:focus-visible,
+.because-card:focus-visible {
+  outline: none;
+}
+
+.card:focus-visible::after,
+.because-card:focus-visible::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  box-shadow: inset 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
+  z-index: 10;
+  pointer-events: none;
+}
+
+@media (forced-colors: active) {
+  .card:focus-visible::after,
+  .because-card:focus-visible::after {
+    box-shadow: none;
+    outline: var(--focus-ring-width) solid Highlight;
+    outline-offset: calc(-1 * var(--focus-ring-width));
+  }
+}
+
@@ -7,10 +7,10 @@
  width: 2px;
 }

-/* Focus ring — Dracula Purple for keyboard nav */
-[data-theme='dracula'] *:focus-visible {
-  outline: 2px solid #bd93f9;
-  outline-offset: 2px;
+/* Focus ring — Dracula only tunes the colour; width/offset/placement come from
+   the shared :focus-visible rule and card focus ring (all var-driven). */
+[data-theme='dracula'] {
+  --focus-ring-color: #bd93f9;
 }

 /* Scrollbar thumb — Comment colour (Dracula-authentic) */
@@ -1,7 +1,17 @@
 /* ─── Focus ─── */
-:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: 2px;
-  border-radius: var(--radius-sm);
+/* Single source of truth for keyboard focus rings. Inset (negative offset) so the
+   ring is drawn INSIDE the element and is never clipped by an ancestor's
+   overflow:hidden / scroll container (cards, rails, player bar, queue strip).
+   Outline (not box-shadow) keeps it visible in forced-colors / high-contrast mode.
+   The outline follows each element's own border-radius natively. */
+:root {
+  --focus-ring-width: 2px;
+  --focus-ring-color: var(--accent);
+  --focus-ring-offset: -2px;
+}
+
+:focus-visible {
+  outline: var(--focus-ring-width) solid var(--focus-ring-color);
+  outline-offset: var(--focus-ring-offset);
 }