From abbd78f42bc03afac511a981062acda83c41e29f Mon Sep 17 00:00:00 2001 From: asepharyana Date: Fri, 7 Aug 2026 18:18:14 +0700 Subject: [PATCH] fix(ui): theme popover/input tokens and open select below trigger Select dropdowns (voice tab, guild selector) rendered with a transparent background because --color-popover/--color-input were undefined, and the popup overlapped the trigger due to alignItemWithTrigger. Define the missing theme tokens (popover, popover-foreground, input, secondary) and default the select popup to open below the trigger. --- services/frontend/src/app/globals.css | 14 ++++++++++++++ services/frontend/src/components/ui/select.tsx | 2 +- 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/services/frontend/src/app/globals.css b/services/frontend/src/app/globals.css index 4ec3059..8b14898 100644 --- a/services/frontend/src/app/globals.css +++ b/services/frontend/src/app/globals.css @@ -56,6 +56,13 @@ /* Ring / focus outline for shadcn outline-ring utility */ --color-ring: var(--color-primary); + /* Base-ui / shadcn primitives */ + --color-popover: oklch(0.99 0.005 250 / 0.95); + --color-popover-foreground: var(--color-text-primary); + --color-input: oklch(0.55 0.02 250 / 0.35); + --color-secondary: oklch(0.92 0.01 250 / 0.6); + --color-secondary-foreground: var(--color-text-primary); + /* Sidebar (shadcn) */ --color-sidebar: oklch(1 0 0 / 0.6); --color-sidebar-foreground: var(--color-text-primary); @@ -113,6 +120,13 @@ --color-accent-foreground: var(--color-primary-foreground); --color-ring: var(--color-primary); + /* Base-ui / shadcn primitives */ + --color-popover: oklch(0.13 0.02 245 / 0.96); + --color-popover-foreground: var(--color-text-primary); + --color-input: oklch(1 0 0 / 0.18); + --color-secondary: oklch(0.2 0.02 245 / 0.7); + --color-secondary-foreground: var(--color-text-primary); + /* Sidebar (shadcn) */ --color-sidebar: oklch(0.11 0.02 245 / 0.55); --color-sidebar-foreground: var(--color-text-primary); diff --git a/services/frontend/src/components/ui/select.tsx b/services/frontend/src/components/ui/select.tsx index e8021f5..17808a9 100644 --- a/services/frontend/src/components/ui/select.tsx +++ b/services/frontend/src/components/ui/select.tsx @@ -63,7 +63,7 @@ function SelectContent({ sideOffset = 4, align = "center", alignOffset = 0, - alignItemWithTrigger = true, + alignItemWithTrigger = false, ...props }: SelectPrimitive.Popup.Props & Pick<