From 85521cae0ddc09ec5637a20ef9f4598395a12f84 Mon Sep 17 00:00:00 2001
From: npeter83 <npeter83+claude@gmail.com>
Date: Thu, 11 Jun 2026 22:39:52 +0200
Subject: [PATCH] fix(ui): opacity-based frosted glass; drop full-page settings
 blur
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Evidence (sharp video behind overlays) shows backdrop-filter is a no-op here, most
likely because browser hardware acceleration is off — so the glass relied on a blur
that never rendered. Lean on opacity instead (94% surface) so overlay menus/panels
read as frosted glass regardless of GPU; keep the blur as a bonus when available.
Revert the settings backdrop to a plain dim scrim (no whole-page blur) and make the
header a solid bar (no backdrop-filter ancestor).
---
 frontend/src/components/Header.tsx        |  2 +-
 frontend/src/components/SettingsPanel.tsx |  2 +-
 frontend/src/index.css                    | 14 ++++++++------
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
index 2f7a5a8..bd5ca99 100644
--- a/frontend/src/components/Header.tsx
+++ b/frontend/src/components/Header.tsx
@@ -26,7 +26,7 @@ export default function Header({
   }
 
   return (
-    <header className="h-14 shrink-0 border-b border-border bg-surface/80 backdrop-blur flex items-center gap-3 px-4 z-20">
+    <header className="h-14 shrink-0 border-b border-border bg-surface/95 flex items-center gap-3 px-4 z-20">
       <button
         onClick={() => setPage("feed")}
         className="text-xl font-bold tracking-tight select-none"
diff --git a/frontend/src/components/SettingsPanel.tsx b/frontend/src/components/SettingsPanel.tsx
index d466566..51e01a2 100644
--- a/frontend/src/components/SettingsPanel.tsx
+++ b/frontend/src/components/SettingsPanel.tsx
@@ -54,7 +54,7 @@ export default function SettingsPanel({
   return (
     <div className="fixed inset-0 z-40 flex justify-end">
       <div
-        className={`absolute inset-0 bg-black/30 backdrop-blur-lg ${
+        className={`absolute inset-0 bg-black/50 ${
           closing ? "animate-[overlayOut_0.19s_ease_forwards]" : "animate-[overlayIn_0.2s_ease]"
         }`}
         onClick={close}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index eec0164..0be69e9 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -32,12 +32,14 @@ body {
 
 /* ===== Liquid-glass surface system (theme-aware, GPU-light) ===== */
 .glass {
-  /* Frosted overlay surface: strong blur so background content is an unreadable
-     blur, plus enough opacity to stay legible over anything. */
-  background: color-mix(in srgb, var(--surface) 86%, transparent);
-  backdrop-filter: blur(32px) saturate(1.8);
-  -webkit-backdrop-filter: blur(32px) saturate(1.8);
-  border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
+  /* Frosted overlay surface. We lean on opacity (not blur) so it looks right even
+     when the browser has hardware acceleration off, where backdrop-filter is a no-op
+     and a sharp background would otherwise show through. The blur is a bonus that
+     kicks in when GPU compositing is available. */
+  background: color-mix(in srgb, var(--surface) 94%, 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 15%, transparent),
     0 18px 44px -16px rgba(0, 0, 0, 0.6);