marco/buildmymcpserver
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(web): UserMenu + CountryPicker dropdowns frosted (Tailwind v4 bug)
All checks were successful
Deploy to Production / deploy (push) Successful in 53s
Details

Browse Source 
Same Tailwind-v4 bracket-arbitrary issue we hit on the marketing burger
menu: bg-[--color-bg-elevated] compiles to `background-color:
--color-bg-elevated` (no var() wrap → invalid color → transparent).
Both dropdowns were rendering see-through against the dashboard.

Switch both to the proven pattern: backdrop-blur-md class + inline
style for backgroundColor + borderColor using color-mix() and explicit
var(). 88% elevated-panel fill gives a clear frosted-glass look while
keeping the menu items readable.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Marco Sadjadi 2026-05-25 23:04:02 +02:00
parent c656bd3189
commit a8e6f4fabd
2 changed files with 19 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
apps/web/components/country-picker.tsx
View File

@ -111,7 +111,15 @@ export function CountryPicker({
{open && (
<div
role="listbox"
className="absolute left-0 right-0 top-full z-50 mt-1 overflow-hidden rounded-md border border-[--color-border] bg-[--color-bg-elevated] shadow-lg shadow-black/40"
// Background + border via inline style for the same reason as UserMenu:
// Tailwind v4's `bg-[--color-X]` bracket syntax produces invalid CSS,
// so the dropdown was rendering transparent. Frosted glass via
// backdrop-blur + 88% elevated-panel fill.
className="absolute left-0 right-0 top-full z-50 mt-1 overflow-hidden rounded-md border shadow-lg shadow-black/40 backdrop-blur-md"
style={{
backgroundColor: 'color-mix(in oklab, var(--color-bg-elevated) 88%, transparent)',
borderColor: 'var(--color-border)',
}}
>
<div className="flex items-center gap-2 border-b border-[--color-border] px-2.5">
<Search size={13} className="text-[--color-fg-subtle]" />

11
apps/web/components/user-menu.tsx
View File

@ -120,7 +120,16 @@ export function UserMenu() {
{open && (
<div
role="menu"
className="absolute right-0 top-9 z-50 w-64 overflow-hidden rounded-md border border-[--color-border] bg-[--color-bg-elevated] shadow-lg shadow-black/40"
// Background + border via inline style: Tailwind v4's bracket-arbitrary
// syntax `bg-[--color-X]` emits invalid CSS (forgets var() wrap), so the
// dropdown rendered fully transparent. Inline color-mix with explicit
// var() gives the frosted look — 88% elevated panel + backdrop-blur on
// top — same pattern as the marketing burger menu.
className="absolute right-0 top-9 z-50 w-64 overflow-hidden rounded-md border shadow-lg shadow-black/40 backdrop-blur-md"
style={{
backgroundColor: 'color-mix(in oklab, var(--color-bg-elevated) 88%, transparent)',
borderColor: 'var(--color-border)',
}}
>
<div className="border-b border-[--color-border] px-3.5 py-3">
<div className="flex items-center gap-2.5">