fix(pwa): bottom nav overlaps content on mobile scroll

apps/web/src/components/layout/BottomNav.tsx

@@ -6,14 +6,16 @@ import { useSettingsStore, selectAiEnabled } from '../../stores/settingsStore.js
 
 /**
  * Mobile bottom tab bar — the only navigation below md (the Sidebar is
- * hidden there). Fixed to the bottom, 5 tabs, safe-area aware so it clears
- * the iPhone home indicator when installed as a PWA.
+ * hidden there). A normal flex child at the bottom of the app shell (NOT
+ * position:fixed — that jumps and overlaps content over a nested scroller in
+ * iOS standalone PWAs), 5 tabs, safe-area aware so it clears the iPhone home
+ * indicator when installed as a PWA.
  */
 export function BottomNav() {
   const aiEnabled = useSettingsStore(selectAiEnabled);
   return (
     <nav
-      className="md:hidden fixed inset-x-0 bottom-0 z-40 border-t border-hairline bg-bg-base/90 backdrop-blur-md"
+      className="md:hidden shrink-0 border-t border-hairline bg-bg-base"
       style={{ paddingBottom: 'env(safe-area-inset-bottom)' }}
       aria-label="Primary"
     >

apps/web/src/components/layout/Layout.tsx

@@ -11,12 +11,12 @@ import { SettingsModal } from '../settings/SettingsModal.js';
  */
 export function Layout() {
   return (
-    <div className="h-full flex flex-col md:flex-row">
+    <div className="app-shell flex flex-col md:flex-row">
       <Sidebar />
-      <div className="flex-1 flex flex-col min-w-0">
+      <div className="flex-1 flex flex-col min-w-0 overflow-hidden">
         <Header />
         <main className="flex-1 overflow-y-auto scrollbar-thin">
-          <div className="max-w-[1320px] mx-auto pb-[calc(72px+env(safe-area-inset-bottom))] md:pb-12">
+          <div className="max-w-[1320px] mx-auto pb-8 md:pb-12">
             <Outlet />
           </div>
         </main>

apps/web/src/styles/globals.css

@@ -8,6 +8,17 @@
   #root {
     height: 100%;
   }
+
+  /* App shell: exactly one *dynamic* viewport tall so the bottom nav is a normal
+     flex child pinned below the scroll area — no position:fixed, which jumps and
+     overlaps content over a nested scroller in iOS standalone PWAs. 100vh is the
+     fallback for browsers without dvh; overflow-hidden keeps <main> the only
+     scroller (no page-level rubber-banding). */
+  .app-shell {
+    height: 100vh;
+    height: 100dvh;
+    overflow: hidden;
+  }
   body {
     background: var(--base);
     color: var(--ink);