fix(mobile): clamp main scrollers — WebKit pans pre-transform overflow

CHANGELOG.md

@@ -19,12 +19,15 @@ All notable changes to Tome are documented here. Format loosely follows
 
 ### Fixed
 - **The mobile app no longer feels like a draggable website.** On phones the
-  whole viewport could be rubber-banded past its edges, double-tap zoomed, and
-  a long press selected interface text — classic browser-tab behavior. The app
-  now suppresses edge bounce and scroll chaining, removes double-tap zoom (taps
-  fire immediately), disables text selection on interface chrome for touch
-  devices (text fields and the reader keep it), and sizes the shell to the
-  real visible viewport instead of overhanging behind mobile browser toolbars.
+  page content could be dragged sideways and rubber-banded (on iOS the Focus
+  view's scaled cover fan still counted its full unscaled width as scrollable
+  overflow), the viewport bounced past its edges, double-tap zoomed, and a
+  long press selected interface text — classic browser-tab behavior. The app
+  now clamps content to the viewport width, suppresses edge bounce and scroll
+  chaining, removes double-tap zoom (taps fire immediately), disables text
+  selection on interface chrome for touch devices (text fields and the reader
+  keep it), and sizes the shell to the real visible viewport instead of
+  overhanging behind mobile browser toolbars.
 - **The notifications panel no longer renders behind sticky page content.** The
   top bar sat at the same layer as page-level sticky toolbars (and below the new
   timeline axis), so the open notification dropdown was cut by the Stats

frontend/src/components/AppShell.tsx

@@ -104,7 +104,9 @@ export function AppShell({
           mobileOpen={mobileSidebarOpen}
           onMobileClose={() => setMobileSidebarOpen(false)}
         />
-        <main className="flex-1 overflow-y-auto min-w-0 overscroll-contain">{children}</main>
+        {/* overflow-x-hidden: see DashboardPage's main — WebKit pans pre-transform
+            layout overflow sideways; keep the app clamped to the viewport. */}
+        <main className="flex-1 overflow-y-auto overflow-x-hidden min-w-0 overscroll-contain">{children}</main>
       </div>
     </div>
   )

frontend/src/pages/DashboardPage.tsx

@@ -1077,7 +1077,10 @@ export function DashboardPage() {
           onMobileClose={() => setMobileSidebarOpen(false)}
         />
 
-        <main className="flex-1 overflow-y-auto px-4 py-4 min-w-0 overscroll-contain">
+        {/* overflow-x-hidden: WebKit counts pre-transform layout boxes (e.g. the
+            focus rotary's scaled 540px stage) as scrollable overflow, letting the
+            content pan sideways on phones; Chromium doesn't, so test on Safari. */}
+        <main className="flex-1 overflow-y-auto overflow-x-hidden px-4 py-4 min-w-0 overscroll-contain">
           {/* Section heading */}
           {activeLibraryName && (
             <h2 className="text-lg font-semibold mb-3">{activeLibraryName}</h2>