From 769f664896500fff0eb01010fe9719a3b6d8e371 Mon Sep 17 00:00:00 2001
From: 8tp <8tp@users.noreply.github.com>
Date: Tue, 23 Jun 2026 09:41:19 -0500
Subject: [PATCH] fix(pwa): stop bottom nav overlapping content on mobile
 scroll
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

On iOS standalone PWAs a position:fixed bottom nav over a nested scroll
container (<main overflow-y-auto> inside a height:100% shell) jumps and
covers content as you scroll.

Make the shell exactly one dynamic viewport tall (.app-shell = 100dvh, 100vh
fallback, overflow hidden) and turn the bottom nav into a normal flex child
(shrink-0) below the scroll area instead of position:fixed. <main> is now the
only scroller and the nav is structurally pinned — no fixed-positioning quirks.
Drops the 72px bottom reserve that the fixed nav needed.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 apps/web/src/components/layout/BottomNav.tsx |  8 +++++---
 apps/web/src/components/layout/Layout.tsx    |  6 +++---
 apps/web/src/styles/globals.css              | 11 +++++++++++
 3 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/apps/web/src/components/layout/BottomNav.tsx b/apps/web/src/components/layout/BottomNav.tsx
index 476f478..aa5307c 100644
--- a/apps/web/src/components/layout/BottomNav.tsx
+++ b/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"
     >
diff --git a/apps/web/src/components/layout/Layout.tsx b/apps/web/src/components/layout/Layout.tsx
index 6fbe2b6..d1c047d 100644
--- a/apps/web/src/components/layout/Layout.tsx
+++ b/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>
diff --git a/apps/web/src/styles/globals.css b/apps/web/src/styles/globals.css
index 9c092dd..b9256d6 100644
--- a/apps/web/src/styles/globals.css
+++ b/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);