From e99180fc7d7ec1a1f5d180ac4e6557bc408f0b15 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <marc@bombeck.io>
Date: Wed, 11 Nov 2026 21:48:17 +0100
Subject: [PATCH] fix(nav): let the More sheet scroll on a phone held sideways

Held sideways a phone keeps the bottom bar, and the sheet's 90 dvh cap
is about 350 px there, while the hub needs 410 to 540 px. The grid did
not shrink or scroll, so the last rows (documents, timeline, coach,
achievements) sat below the screen edge. It scrolls inside the sheet
now and stops at its end instead of pulling the page.
---
 src/__tests__/pwa-mobile-shell-guard.test.ts | 10 ++++++++++
 src/components/layout/bottom-nav.tsx         |  4 ++--
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/__tests__/pwa-mobile-shell-guard.test.ts b/src/__tests__/pwa-mobile-shell-guard.test.ts
index ad045d3d8..f68bba020 100644
--- a/src/__tests__/pwa-mobile-shell-guard.test.ts
+++ b/src/__tests__/pwa-mobile-shell-guard.test.ts
@@ -129,6 +129,16 @@ describe("the shell owns the safe area", () => {
     expect(bottomClass).not.toMatch(/(?<![\w-])bottom-/);
   });
 
+  it("the More sheet's grid scrolls inside the sheet's height cap", () => {
+    // Held sideways a phone keeps the bottom bar, and 90 dvh of a 393 px
+    // screen is shorter than the hub: the last rows sat below the edge.
+    const nav = code(read("src/components/layout/bottom-nav.tsx"));
+    const grid = nav.match(/"grid [^"]*grid-cols-2[^"]*"/)?.[0] ?? "";
+    expect(grid).toMatch(/\bmin-h-0\b/);
+    expect(grid).toMatch(/\boverflow-y-auto\b/);
+    expect(grid).toMatch(/\boverscroll-contain\b/);
+  });
+
   it("the sheet primitives name their side for those rules", () => {
     expect(read("src/components/ui/sheet.tsx")).toMatch(
       /data-sheet-side=\{side\}/,
diff --git a/src/components/layout/bottom-nav.tsx b/src/components/layout/bottom-nav.tsx
index 40e7fa710..0a5d94449 100644
--- a/src/components/layout/bottom-nav.tsx
+++ b/src/components/layout/bottom-nav.tsx
@@ -287,8 +287,8 @@ export function BottomNav() {
               little more width on a 320 px phone; the long single-word labels
               (de "Benachrichtigungen") then have room to break onto a clean
               second line instead of clipping the last character at the tile
-              edge. */}
-          <div className="grid grid-cols-2 gap-2 px-3 pt-4 pb-4">
+              edge. It scrolls: a phone held sideways is shorter than the hub. */}
+          <div className="grid min-h-0 grid-cols-2 gap-2 overflow-y-auto overscroll-contain px-3 pt-4 pb-4">
             {moreHub.map((item) => {
               const isActive = isActiveLink(item.href);
               return (