From 74491991d739b356064238a72c9765699cb9588a Mon Sep 17 00:00:00 2001
From: npeter83 <npeter83+claude@gmail.com>
Date: Tue, 16 Jun 2026 01:39:56 +0200
Subject: [PATCH] fix(ui): opaque .glass-menu for floating popovers
 (readability)

Floating menus hover over undimmed content (no backdrop scrim like dialogs), so the
frosted .glass (78%) let the content bleed through and hurt readability. Add a near-opaque
.glass-menu (surface 92%, keeps blur) and use it for the account, language, notification
and add-to-playlist popovers. Dialogs/chrome keep the frostier .glass (they sit over a dark
scrim / the ambient bg). perf-mode disables its blur too.
---
 frontend/src/components/AddToPlaylist.tsx      |  2 +-
 frontend/src/components/LanguageSwitcher.tsx   |  2 +-
 frontend/src/components/NavSidebar.tsx         |  2 +-
 frontend/src/components/NotificationCenter.tsx |  2 +-
 frontend/src/index.css                         | 12 ++++++++++++
 5 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/AddToPlaylist.tsx b/frontend/src/components/AddToPlaylist.tsx
index 3124c97..5260163 100644
--- a/frontend/src/components/AddToPlaylist.tsx
+++ b/frontend/src/components/AddToPlaylist.tsx
@@ -139,7 +139,7 @@ export default function AddToPlaylist({
           <div
             ref={panelRef}
             style={{ position: "fixed", top: coords.top, left: coords.left, width: 240 }}
-            className="z-50 glass rounded-xl p-2 shadow-2xl"
+            className="z-50 glass-menu rounded-xl p-2 shadow-2xl"
             onClick={(e) => e.stopPropagation()}
           >
             <div className="text-xs text-muted px-1.5 pb-1.5">
diff --git a/frontend/src/components/LanguageSwitcher.tsx b/frontend/src/components/LanguageSwitcher.tsx
index f62a888..62e90cf 100644
--- a/frontend/src/components/LanguageSwitcher.tsx
+++ b/frontend/src/components/LanguageSwitcher.tsx
@@ -38,7 +38,7 @@ export default function LanguageSwitcher({
 
       {open && (
         <div
-          className={`glass absolute ${
+          className={`glass-menu absolute ${
             align === "right" ? "right-0" : "left-0"
           } mt-1 w-40 rounded-xl p-1.5 z-40 animate-[popIn_0.16s_ease]`}
         >
diff --git a/frontend/src/components/NavSidebar.tsx b/frontend/src/components/NavSidebar.tsx
index 9b13173..992a2a0 100644
--- a/frontend/src/components/NavSidebar.tsx
+++ b/frontend/src/components/NavSidebar.tsx
@@ -143,7 +143,7 @@ export default function NavSidebar({
           {acctOpen && (
             <>
               <div className="fixed inset-0 z-20" onClick={() => setAcctOpen(false)} />
-              <div className="glass absolute left-full bottom-0 ml-2 w-60 rounded-xl p-3 z-30 animate-[popIn_0.16s_ease]">
+              <div className="glass-menu absolute left-full bottom-0 ml-2 w-60 rounded-xl p-3 z-30 animate-[popIn_0.16s_ease]">
                 <div className="flex items-center gap-3 pb-3 border-b border-border">
                   <AvatarImg
                     src={me.avatar_url}
diff --git a/frontend/src/components/NotificationCenter.tsx b/frontend/src/components/NotificationCenter.tsx
index 299ebb0..a50a5d3 100644
--- a/frontend/src/components/NotificationCenter.tsx
+++ b/frontend/src/components/NotificationCenter.tsx
@@ -97,7 +97,7 @@ export default function NotificationCenter({
       </button>
 
       {open && (
-        <div className="glass absolute right-0 mt-2 w-80 max-w-[calc(100vw-2rem)] rounded-xl z-30 flex flex-col max-h-[70vh] animate-[popIn_0.16s_ease]">
+        <div className="glass-menu absolute right-0 mt-2 w-80 max-w-[calc(100vw-2rem)] rounded-xl z-30 flex flex-col max-h-[70vh] animate-[popIn_0.16s_ease]">
           <div className="flex items-center justify-between px-3 py-2 border-b border-border">
             <div className="text-sm font-semibold">{t("notifications.title")}</div>
             {notifications.length > 0 && (
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 6d7d27e..ecee970 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -56,6 +56,17 @@ body {
     inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent),
     0 8px 22px -14px rgba(0, 0, 0, 0.45);
 }
+.glass-menu {
+  /* Floating menus/popovers hover over undimmed content (no backdrop scrim like dialogs),
+     so they must be near-opaque to stay readable — only a hint of translucency + the blur. */
+  background: color-mix(in srgb, var(--surface) 92%, transparent);
+  backdrop-filter: blur(30px) saturate(1.8);
+  -webkit-backdrop-filter: blur(30px) saturate(1.8);
+  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
+  box-shadow:
+    inset 0 1px 0 color-mix(in srgb, #fff 14%, transparent),
+    0 18px 44px -16px rgba(0, 0, 0, 0.6);
+}
 .glass-hover:hover {
   border-color: color-mix(in srgb, var(--accent) 55%, transparent);
   box-shadow:
@@ -78,6 +89,7 @@ html[data-theme="dark"] body {
 
 /* Performance mode (Settings → Appearance) drops the expensive blur + soft shadows. */
 html[data-perf="1"] .glass,
+html[data-perf="1"] .glass-menu,
 html[data-perf="1"] .glass-card {
   backdrop-filter: none;
   -webkit-backdrop-filter: none;