From d77d4679cd67318e8b0d731dc7662e19b52fa769 Mon Sep 17 00:00:00 2001
From: Antisophy <293439221+Antisophy@users.noreply.github.com>
Date: Fri, 21 Aug 2026 00:57:21 -0700
Subject: [PATCH] fix(web): stop the page dragging sideways on narrow screens

On a phone the whole page can be dragged horizontally, header and all, with
black space appearing at the right edge. The banner's right-hand cluster is
what widens it: rename button, status and theme toggle measure 509px against
a 390px viewport, and a flex item defaults to min-width:auto, so the cluster
refuses to shrink below its contents and takes the document to 525px.

Let it shrink and let the status text ellipsize, which brings the document
back to exactly the viewport width. Hide horizontal overflow at the root as
well: the panes that need sideways scrolling (code blocks, tables) scroll
inside themselves, so give at the document level is always an overflowing
child rather than something worth dragging.
---
 web/src/styles.css | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/web/src/styles.css b/web/src/styles.css
index cea89215..c3955683 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -103,6 +103,11 @@ body,
   font-family: var(--font-sans);
   font-size: 15px;
   overscroll-behavior: none;
+  /* nothing here scrolls sideways at the document level: the panes that need
+     it scroll inside themselves, so any horizontal give is an overflowing
+     child dragging the whole page with it */
+  overflow-x: hidden;
+  max-width: 100%;
 }
 
 .app {
@@ -638,6 +643,9 @@ body,
   gap: 12px;
   font-size: 12px;
   margin-left: auto;
+  /* a flex item defaults to min-width:auto, so this cluster refuses to shrink
+     below its contents and widens the document past the viewport */
+  min-width: 0;
 }
 
 .banner-usage {
@@ -795,6 +803,11 @@ body,
 .banner-status {
   padding: 2px 8px;
   font-size: 12px;
+  /* the longest thing in the banner, and the one that can safely be clipped */
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .banner-status.connected {