From 6292a1d9a452faa4373d287d9cb16e4031cb1be5 Mon Sep 17 00:00:00 2001 From: Claude Date: Tue, 23 Jun 2026 00:00:52 +0000 Subject: [PATCH] Make dropdown menus opaque so content no longer shows through The favorites selector, food-search results, and hydration goal/glass dropdowns used --glass-2 (6% opaque white) and relied solely on backdrop-filter to hide what was behind them. Over bright card content and text, the underlying UI bled through. Add a --glass-popover token (near-opaque, theme-aware) and point the floating menus at it. The frosted blur, glass border, and shadow are unchanged, so the glass feel is preserved while the background is masked. Co-Authored-By: Claude Opus 4.8 Claude-Session: https://claude.ai/code/session_01VDWtPAnqG2XzZB3rSnGb9J --- frontend/src/components/settings/HydrationCard.tsx | 4 ++-- frontend/src/components/today/NutritionCalculatorCard.tsx | 4 +++- frontend/src/index.css | 4 ++++ 3 files changed, 9 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/settings/HydrationCard.tsx b/frontend/src/components/settings/HydrationCard.tsx index 3628f2d..a8d131c 100644 --- a/frontend/src/components/settings/HydrationCard.tsx +++ b/frontend/src/components/settings/HydrationCard.tsx @@ -240,7 +240,7 @@ export function HydrationCard() { top: 'calc(100% + 6px)', left: 0, right: 0, - background: 'var(--glass-2)', + background: 'var(--glass-popover)', border: '1px solid var(--glass-edge)', borderRadius: 12, backdropFilter: 'blur(16px)', @@ -340,7 +340,7 @@ export function HydrationCard() { top: 'calc(100% + 6px)', left: 0, right: 0, - background: 'var(--glass-2)', + background: 'var(--glass-popover)', border: '1px solid var(--glass-edge)', borderRadius: 12, backdropFilter: 'blur(16px)', diff --git a/frontend/src/components/today/NutritionCalculatorCard.tsx b/frontend/src/components/today/NutritionCalculatorCard.tsx index ac7ac7c..d139762 100644 --- a/frontend/src/components/today/NutritionCalculatorCard.tsx +++ b/frontend/src/components/today/NutritionCalculatorCard.tsx @@ -709,6 +709,7 @@ export function NutritionCalculatorCard({ overflowY: 'auto', borderRadius: 10, border: '1px solid var(--glass-edge)', + background: 'var(--glass-popover)', }} > {favMatches.map((fav) => { @@ -818,6 +819,7 @@ export function NutritionCalculatorCard({ color: 'var(--fg-quiet)', borderRadius: 10, border: '1px solid var(--glass-edge)', + background: 'var(--glass-popover)', }} > No results found. @@ -878,7 +880,7 @@ export function NutritionCalculatorCard({ overflowY: 'auto', borderRadius: 12, border: '1px solid var(--glass-edge)', - background: 'var(--glass-2)', + background: 'var(--glass-popover)', backdropFilter: 'blur(16px)', WebkitBackdropFilter: 'blur(16px)', boxShadow: '0 8px 32px rgba(0,0,0,0.4)', diff --git a/frontend/src/index.css b/frontend/src/index.css index cab17d7..934c6c2 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -108,6 +108,9 @@ layer(base); --glass-3: rgba(255, 255, 255, 0.09); --glass-edge: rgba(255, 255, 255, 0.12); --glass-edge-strong: rgba(255, 255, 255, 0.18); + /* Floating menus/popovers: opaque enough to mask content scrolling behind, + still frosted under backdrop-filter (bg-2 tint over near-solid base) */ + --glass-popover: rgba(16, 24, 44, 0.94); /* Motion — chart/ring entry (BRAND-GUIDE §12) */ --ease-ring: cubic-bezier(0.2, 0.7, 0.2, 1); @@ -199,6 +202,7 @@ layer(base); --glass-3: rgba(255, 255, 255, 0.88); --glass-edge: rgba(15, 23, 42, 0.08); --glass-edge-strong: rgba(15, 23, 42, 0.14); + --glass-popover: rgba(255, 255, 255, 0.96); --fg-primary: #0c1426; --fg-secondary: rgba(12, 20, 38, 0.78);