From 1fd3be1ca588b8a989d3af65da446e1816099790 Mon Sep 17 00:00:00 2001
From: Lemon <lemonknowsall@gmail.com>
Date: Wed, 18 Mar 2026 22:23:39 -0700
Subject: [PATCH] Fix header opacity by layering fixed backing below content
 area
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Lowers the fixed backing layer to z-index 1 and adds z-10 to
the main content area. When at the top of the page, the backing
provides the 85% opacity behind the header. When scrolled, the
content area (z-10) occludes the backing (z-1), so only one
layer of 85% is ever behind the header — matching the tab bar.
---
 src/components/MainLayout.tsx   | 2 +-
 src/components/MobileTopBar.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/MainLayout.tsx b/src/components/MainLayout.tsx
index 4df33aad..75cb8b5d 100644
--- a/src/components/MainLayout.tsx
+++ b/src/components/MainLayout.tsx
@@ -88,7 +88,7 @@ function MainLayoutInner() {
 
         {/* Main content + right sidebar: inside Suspense so the left sidebar persists while lazy pages load */}
         <Suspense fallback={<PageSkeleton />}>
-          <div className={cn("relative flex-1 min-w-0 sidebar:border-l sidebar:border-r border-border bg-background/85", !noMaxWidth && "sidebar:max-w-[600px]", !noOverscroll && "pb-overscroll")}>
+          <div className={cn("relative z-10 flex-1 min-w-0 sidebar:border-l sidebar:border-r border-border bg-background/85", !noMaxWidth && "sidebar:max-w-[600px]", !noOverscroll && "pb-overscroll")}>
             <Outlet />
             {showFAB && (
               <div className="sticky bottom-fab sidebar:bottom-6 z-30 pointer-events-none flex justify-end pr-6">
diff --git a/src/components/MobileTopBar.tsx b/src/components/MobileTopBar.tsx
index 290d1f59..83896968 100644
--- a/src/components/MobileTopBar.tsx
+++ b/src/components/MobileTopBar.tsx
@@ -21,7 +21,7 @@ export function MobileTopBar({ onAvatarClick }: MobileTopBarProps) {
     <>
     {/* Fixed backing layer behind the header — stays at viewport top so the header
         has the same double-opacity look as the tab bar sitting over the content area */}
-    <div className="fixed top-0 left-0 right-0 bg-background/85 sidebar:hidden safe-area-top" style={{ zIndex: 19 }}>
+    <div className="fixed top-0 left-0 right-0 bg-background/85 sidebar:hidden safe-area-top" style={{ zIndex: 1 }}>
       <div className="h-12" />
     </div>
     <header className="sticky top-0 z-20 bg-background/80 sidebar:hidden safe-area-top">