From a8e6f4fabd30102ee753c0684e605997baeedad7 Mon Sep 17 00:00:00 2001
From: Marco Sadjadi <marco@buildmymcpserver.local>
Date: Mon, 25 May 2026 23:04:02 +0200
Subject: [PATCH] fix(web): UserMenu + CountryPicker dropdowns frosted
 (Tailwind v4 bug)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 apps/web/components/country-picker.tsx | 10 +++++++++-
 apps/web/components/user-menu.tsx      | 11 ++++++++++-
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/apps/web/components/country-picker.tsx b/apps/web/components/country-picker.tsx
index 1fc8ce7..e19a40b 100644
--- a/apps/web/components/country-picker.tsx
+++ b/apps/web/components/country-picker.tsx
@@ -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]" />
diff --git a/apps/web/components/user-menu.tsx b/apps/web/components/user-menu.tsx
index f69c61e..d48cb54 100644
--- a/apps/web/components/user-menu.tsx
+++ b/apps/web/components/user-menu.tsx
@@ -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">