From 88630ab7fa7067637d584b4e533a5fb158ec7387 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Fri, 26 Jun 2026 17:44:54 +0800
Subject: [PATCH] fix(web): keep mobile navigation readable

---
 apps/web/src/components/layout/app-layout.tsx | 15 ++++++++++++---
 apps/web/src/components/layout/header.tsx     |  2 +-
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/components/layout/app-layout.tsx b/apps/web/src/components/layout/app-layout.tsx
index 85ed4410..4d89f2c0 100644
--- a/apps/web/src/components/layout/app-layout.tsx
+++ b/apps/web/src/components/layout/app-layout.tsx
@@ -68,7 +68,13 @@ export function AppLayout({
 
   useEffect(() => {
     const media = window.matchMedia(MOBILE_SHELL_MEDIA)
-    const updateMobileShell = () => setMobileShell(media.matches)
+    const updateMobileShell = () => {
+      const isMobile = media.matches
+      setMobileShell(isMobile)
+      if (isMobile) {
+        setCollapsed(false)
+      }
+    }
 
     updateMobileShell()
     media.addEventListener('change', updateMobileShell)
@@ -102,7 +108,10 @@ export function AppLayout({
   // Keep the navigation shell in the server-rendered HTML. If a rolling deploy
   // or stale browser cache delays hydration, the operator still has navigation.
   const effectiveCollapsed = mounted ? collapsed : false
-  const shellCollapsed = mobileShell || effectiveCollapsed
+  const shellCollapsed = effectiveCollapsed
+  const contentOffsetClass = shellCollapsed
+    ? mobileShell ? 'ml-[48px]' : 'ml-[64px]'
+    : 'ml-[224px]'
 
   return (
     <div className="min-h-screen bg-nothing-gray-50">
@@ -137,7 +146,7 @@ export function AppLayout({
           'relative z-10',
           'pt-[68px]',
           'transition-all duration-300 ease-out',
-          mobileShell ? 'ml-[48px]' : shellCollapsed ? 'ml-[64px]' : 'ml-[224px]'
+          contentOffsetClass
         )}
       >
         {fullBleed ? (
diff --git a/apps/web/src/components/layout/header.tsx b/apps/web/src/components/layout/header.tsx
index fd0d37ee..59a0a0af 100644
--- a/apps/web/src/components/layout/header.tsx
+++ b/apps/web/src/components/layout/header.tsx
@@ -51,7 +51,7 @@ export function Header({
     window.location.href = newPath
   }, [locale, pathname])
 
-  const brandWidth = compact ? 64 : sidebarCollapsed ? 64 : 224
+  const brandWidth = sidebarCollapsed ? 64 : 224
 
   return (
     <header