From ff97415c91716891596421124ef3f4eb402cd4e6 Mon Sep 17 00:00:00 2001
From: Ivan Marynych <marynych.ivan@icloud.com>
Date: Thu, 10 Sep 2026 14:13:15 +0000
Subject: [PATCH] fix: opaque fallback for mobile header/sidebar background

--component-header-background and --component-sidebar-background
resolve to an empty string in some themes. An unresolved CSS custom
property makes the whole background declaration invalid, so the
browser falls back to transparent -- the mobile hamburger menu then
renders with a see-through sidebar and page text bleeds through
behind the nav items, even though the click-to-close backdrop overlay
itself is fully opaque and working correctly.

Add --background-base as an explicit fallback in both var() calls so
the sidebar and mobile header always paint an opaque background, with
themes still free to override via the component tokens.
---
 web/src/App.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/web/src/App.tsx b/web/src/App.tsx
index bb79cb6a6a..d0d50b697d 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -532,7 +532,8 @@ export default function App() {
           "bg-background-base",
         )}
         style={{
-          background: "var(--component-header-background)",
+          background:
+            "var(--component-header-background, var(--background-base))",
           borderImage: "var(--component-header-border-image)",
           clipPath: "var(--component-header-clip-path)",
         }}
@@ -591,7 +592,8 @@ export default function App() {
               collapsed && "lg:w-14",
             )}
             style={{
-              background: "var(--component-sidebar-background)",
+              background:
+                "var(--component-sidebar-background, var(--background-base))",
               clipPath: "var(--component-sidebar-clip-path)",
               borderImage: "var(--component-sidebar-border-image)",
             }}