From 1fd51745c7a298d823f0c256a034f3aa34a9aec0 Mon Sep 17 00:00:00 2001
From: ChangeHow <23733347+ChangeHow@users.noreply.github.com>
Date: Wed, 29 Jul 2026 23:25:02 +0800
Subject: [PATCH] fix(ui): avoid vibrancy backing on unstuck project headers
 (#2526)

---
 .../src/components/session/sidebar/sortableItems.tsx |  4 ++--
 packages/ui/src/styles/design-system.css             | 12 +++---------
 2 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/packages/ui/src/components/session/sidebar/sortableItems.tsx b/packages/ui/src/components/session/sidebar/sortableItems.tsx
index bb51e3a9..e01802af 100644
--- a/packages/ui/src/components/session/sidebar/sortableItems.tsx
+++ b/packages/ui/src/components/session/sidebar/sortableItems.tsx
@@ -196,7 +196,8 @@ export const SortableProjectItem: React.FC<SortableProjectItemProps> = ({
                 <div
                   className={cn(
                     '-ml-2.5 -mr-2 text-left group/project select-none',
-                    stickyZoneHeaders && 'oc-zone-header-backing sticky top-0 z-20 bg-sidebar',
+                    stickyZoneHeaders && 'sticky top-0 z-20 bg-sidebar',
+                    stickyZoneHeaders && isStuck && 'oc-zone-header-backing',
                   )}
                   onContextMenu={(event) => {
                     // VS Code hides project actions entirely (hideDirectoryControls).
@@ -422,4 +423,3 @@ const SortableGroupItemBase: React.FC<{
 };
 
 export const SortableGroupItem = React.memo(SortableGroupItemBase);
-
diff --git a/packages/ui/src/styles/design-system.css b/packages/ui/src/styles/design-system.css
index 023f3cc7..17b8401c 100644
--- a/packages/ui/src/styles/design-system.css
+++ b/packages/ui/src/styles/design-system.css
@@ -150,18 +150,12 @@
     background-color: transparent !important;
   }
 
-  /* Sticky sidebar zone headers must fully mask the rows scrolling under
-     them. A frosted (translucent + backdrop-blur) backing is NOT possible
-     here: Electron's transparent/vibrancy windows break backdrop-filter
-     entirely (electron#20357 — the backdrop snapshot fails against a
-     transparent root), so any translucency lets row text bleed through
-     un-blurred. Use the opaque sidebar tone instead; the blur declaration
-     stays only as a progressive enhancement if Electron ever fixes it. */
+  /* Stuck sidebar zone headers must fully mask the rows scrolling under
+     them. Electron's transparent/vibrancy windows break backdrop-filter
+     (electron#20357), so use the opaque sidebar tone instead. */
   :root.desktop-runtime[data-oc-vibrancy] .oc-zone-header-backing {
     background: var(--sidebar-stuck-bg) !important;
     background-color: var(--sidebar-stuck-bg) !important;
-    -webkit-backdrop-filter: blur(16px) saturate(1.2);
-    backdrop-filter: blur(16px) saturate(1.2);
   }
 
   .font-sans {