From 6565a506667b342795b5c04e5255fd011f2b36aa Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 16 May 2026 10:26:09 +0000
Subject: [PATCH] fix(mobile): prevent horizontal page scroll on /stats and
 /mcp

Long URLs in MCP page tables (e.g. `npx @modelcontextprotocol/inspector ...`)
have no break opportunities, forcing the auto-layout table wider than a
mobile viewport. The viewport scroll then persisted across SPA navigation,
so returning to / arrived with the page horizontally offset and the left
edge clipped.

- inlineCodeSx: add `overflowWrap: anywhere` so URLs/commands wrap inside
  TableCells instead of pushing the table past viewport width.
- tokens.css: add `overflow-x: clip` on html/body as a safety net for any
  other wide element. `clip` (not `hidden`) keeps the sticky masthead
  working since it doesn't create a scroll container.
- RootLayout: also reset window.scrollX on route change so a leftover
  offset from one page doesn't carry into the next.
---
 app/src/components/RootLayout.tsx | 7 +++++++
 app/src/pages/McpPage.tsx         | 3 +++
 app/src/styles/tokens.css         | 8 ++++++++
 3 files changed, 18 insertions(+)

diff --git a/app/src/components/RootLayout.tsx b/app/src/components/RootLayout.tsx
index df5595124d..7f04c7048a 100644
--- a/app/src/components/RootLayout.tsx
+++ b/app/src/components/RootLayout.tsx
@@ -49,6 +49,13 @@ export function RootLayout() {
     window.scrollTo(0, 0);
   }, [pathname, hash, navigationType]);
 
+  // Always reset horizontal scroll on route change. If a previous page leaked
+  // page-level horizontal scroll (e.g. a wide table on mobile), the offset
+  // otherwise persists into the next page and clips its left edge.
+  useEffect(() => {
+    window.scrollTo({ left: 0, top: window.scrollY });
+  }, [pathname]);
+
   return (
     <Box sx={{
       display: 'flex',
diff --git a/app/src/pages/McpPage.tsx b/app/src/pages/McpPage.tsx
index 2650e91cc2..651505f4c7 100644
--- a/app/src/pages/McpPage.tsx
+++ b/app/src/pages/McpPage.tsx
@@ -28,6 +28,9 @@ const inlineCodeSx = {
   padding: '2px 6px',
   borderRadius: '3px',
   color: 'var(--ink)',
+  // Long URLs / commands sit in TableCells; without explicit wrapping they
+  // force the table wider than a mobile viewport.
+  overflowWrap: 'anywhere' as const,
 };
 
 export function McpPage() {
diff --git a/app/src/styles/tokens.css b/app/src/styles/tokens.css
index c1c01609f3..37be1675ea 100644
--- a/app/src/styles/tokens.css
+++ b/app/src/styles/tokens.css
@@ -62,6 +62,14 @@
 /* MonoLisa script variant (italic ss02) — test */
 html { font-feature-settings: "ss02"; }
 
+/* Defense-in-depth against page-level horizontal scroll on mobile. `clip`
+   (not `hidden`) so the masthead's `position: sticky` keeps working — `hidden`
+   would create a scroll container and break it. Wide elements still need their
+   own local containment (e.g. tables, code blocks); this just stops a stray
+   overflow from leaking into viewport-wide horizontal scroll, which on SPA
+   nav otherwise persists across routes. */
+html, body { overflow-x: clip; }
+
 /* Animations */
 @keyframes rise {
   from { opacity: 0; transform: translateY(8px); }