From c16134dab5fdc489d6d50f542e8f996aeff93fdf Mon Sep 17 00:00:00 2001 From: Frank Stellmacher <171614930+Psychotoxical@users.noreply.github.com> Date: Fri, 15 May 2026 19:54:42 +0200 Subject: [PATCH] fix(ui): consolidate Orbit / Server / Live header dropdowns (#725) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix(ui): consolidate Orbit / Server / Live header dropdowns The three header dropdown popovers each had their own container style. Live used a glass utility class with backdrop-filter that read poorly on many themes (reported by cucadmuh). Move all three onto the shared `.nav-library-dropdown-panel` container — same bg, border, shadow and radius via existing semantic tokens (`--bg-card`, `--border-dropdown`, `--shadow-dropdown`, `--radius-md`). Item styles per dropdown stay case-specific. - NowPlayingDropdown: replace `glass animate-fade-in` with `nav-library-dropdown-panel animate-fade-in`; drop now-redundant inline borderRadius / boxShadow / zIndex; keep padding + gap for the user-list breathing room. - OrbitStartTrigger: add `nav-library-dropdown-panel` alongside `orbit-launch-pop`. The component-local class is now reduced to the menu-specific min-width + tighter item gap; bg / border / shadow / radius / padding inherit from the shared container. - Drop the unused `.glass` utility class; no other call sites. * docs(changelog): header dropdown consistency fix (#725) --- CHANGELOG.md | 6 ++++++ src/components/NowPlayingDropdown.tsx | 9 ++------- src/components/OrbitStartTrigger.tsx | 2 +- src/styles/components/orbit-session-top-strip.css | 12 ++++-------- src/styles/themes/utility-classes.css | 7 ------- 5 files changed, 13 insertions(+), 23 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7a8739d6..9f53d105 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -534,6 +534,12 @@ Foundational work: faster reviews, narrower diffs, and a safety net under the pa * The global **`selectstart`** handler assumed `event.target` was always an **`Element`**. Starting selection inside text (e.g. Now Playing **`[data-selectable]`** copy) could pass a **Text** node and crash with **`target.closest is not a function`**. The handler now resolves Text nodes to their parent element before applying allow/deny rules. +### UI — consistent Orbit / Server / Live header dropdown styling + +**By [@Psychotoxical](https://github.com/Psychotoxical) + [@cucadmuh](https://github.com/cucadmuh), PR [#725](https://github.com/Psychotoxical/psysonic/pull/725)** + +* The three header dropdowns (Orbit launch, Server picker, Live listeners) each had their own container styling. Live in particular used a glass / backdrop-filter utility that read poorly on many themes. All three now share the **`.nav-library-dropdown-panel`** container — same background, border, shadow and radius via the existing semantic tokens. Item layouts per dropdown stay case-specific. + ## [1.45.0] - 2026-05-04 ## Added diff --git a/src/components/NowPlayingDropdown.tsx b/src/components/NowPlayingDropdown.tsx index 26ac54ec..6a029f7d 100644 --- a/src/components/NowPlayingDropdown.tsx +++ b/src/components/NowPlayingDropdown.tsx @@ -121,7 +121,7 @@ export default function NowPlayingDropdown() { {isOpen && createPortal(
diff --git a/src/components/OrbitStartTrigger.tsx b/src/components/OrbitStartTrigger.tsx index dbb4cd7e..3442f634 100644 --- a/src/components/OrbitStartTrigger.tsx +++ b/src/components/OrbitStartTrigger.tsx @@ -82,7 +82,7 @@ export default function OrbitStartTrigger() { {popoverOpen && createPortal( -
+