From 6a20ad6c0a6cf9b078da4dd3710fe6cbf37241d2 Mon Sep 17 00:00:00 2001 From: "Brian D. Evans" Date: Mon, 18 May 2026 15:23:03 +0100 Subject: [PATCH] fix(dashboard): constrain theme picker dropdown height so themes are scrollable (#25213) (#25220) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The header theme picker (`ThemeSwitcher`) renders a `role="listbox"` popup with no `max-height` or overflow. With 20+ community themes installed under `~/.hermes/dashboard-themes/`, the list extends past the viewport and themes at the top or bottom are unreachable — the user reports only 15 of 26 themes visible, with no scrollbar to access the rest. Sibling switchers (`LanguageSwitcher`, `SlashPopover`) already cap their listboxes (`max-h-80 overflow-y-auto` / `max-h-64 overflow-y-auto`); this just brings the theme picker into line. Scoped to the component instead of a global `div[role="listbox"]` CSS rule so other dropdowns aren't affected. `70dvh` matches the user's tested workaround and the `dvh` unit handles mobile browser UI chrome correctly (unlike `vh`). Fixes #25213. Co-authored-by: briandevans <252620095+briandevans@users.noreply.github.com> Co-authored-by: Claude Opus 4.7 (1M context) --- web/src/components/ThemeSwitcher.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/src/components/ThemeSwitcher.tsx b/web/src/components/ThemeSwitcher.tsx index 462ccaacfc9..90a3d11ebdb 100644 --- a/web/src/components/ThemeSwitcher.tsx +++ b/web/src/components/ThemeSwitcher.tsx @@ -79,7 +79,7 @@ export function ThemeSwitcher({ dropUp = false }: ThemeSwitcherProps) { role="listbox" aria-label={t.theme?.title ?? "Theme"} className={cn( - "absolute z-50 min-w-[240px]", + "absolute z-50 min-w-[240px] max-h-[70dvh] overflow-y-auto", dropUp ? "left-0 bottom-full mb-1" : "right-0 top-full mt-1", "border border-current/20 bg-background-base/95 backdrop-blur-sm", "shadow-[0_12px_32px_-8px_rgba(0,0,0,0.6)]",