From 8ec4ea1c723687ad72e51d09eee12883a55fb9e1 Mon Sep 17 00:00:00 2001
From: Giorgio Gilestro <giorgio@gilest.ro>
Date: Thu, 28 May 2026 19:02:30 +0200
Subject: [PATCH] mobile: clamp grid items + table cells to viewport width
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

User reported the page rendering at ~3x viewport width on Android
Chrome with overflow-x:hidden clipping off most of the content.
Root cause: CSS grid items default to min-width:min-content, and the
indicator table inside the indicators panel has white-space:nowrap
cells. A long Symbol/Label value forces the table wider than its
panel; the panel propagates that minimum width up the grid; the grid
expands the .app-main; .app-main pushes the page wider than the
viewport. overflow-x:hidden then just chops the right portion off.

Fix has three parts:

1. .app and .app-main get min-width:0 and max-width:100vw so the
   shell can't be wider than the viewport regardless of descendants.
2. Every direct child of .app-main (each panel) gets min-width:0
   on mobile so individual panels can shrink past their min-content.
3. table.dense drops white-space:nowrap on text cells at ≤480px —
   long symbols wrap to two lines instead of forcing the table wide.
   Numeric cells keep nowrap (negative percentages reading as
   "−12\n.34%" would be unreadable).

Also adds an overflow-x:auto fallback on .panel-body pre/code so
any code block in AI output scrolls within the panel instead of
blowing the page out.
---
 app/static/css/layout.css | 20 ++++++++++++++++++--
 app/static/css/panels.css | 23 +++++++++++++++++++++++
 2 files changed, 41 insertions(+), 2 deletions(-)

diff --git a/app/static/css/layout.css b/app/static/css/layout.css
index 2d6fe80..1d2db25 100644
--- a/app/static/css/layout.css
+++ b/app/static/css/layout.css
@@ -26,6 +26,13 @@ a:hover { text-decoration: underline; }
   grid-template-columns: 1fr;
   grid-template-rows: auto 1fr auto;
   min-height: 100vh;
+  /* Grid items default to min-content min-width which can blow past
+     the viewport when a descendant table or flex row is wide. min-width:0
+     lets the cell shrink below intrinsic min-content, and max-width:100vw
+     caps the whole shell against the viewport so we never need to rely on
+     overflow:hidden clipping. */
+  min-width: 0;
+  max-width: 100vw;
 }
 
 .app-header {
@@ -367,8 +374,17 @@ body.drawer-open .drawer-backdrop { opacity: 1; }
 
   /* Body-level layout: tighten main padding too — saves another 16px
      of horizontal real estate which the indicator table and chat
-     bubbles all benefit from. */
-  .app-main { padding: 10px 8px; gap: 10px; }
+     bubbles all benefit from. Also force min-width:0 on the grid
+     container and every grid item, otherwise a wide table inside
+     a panel forces the whole grid (and the page) wider than the
+     viewport. This is the single most important mobile fix. */
+  .app-main {
+    padding: 10px 8px;
+    gap: 10px;
+    min-width: 0;
+    max-width: 100vw;
+  }
+  .app-main > * { min-width: 0; }
 
   /* Markets bar: the desktop grid uses minmax(220px, 1fr) per market,
      which at 4+ markets blows out to 880px+ and forces page-wide
diff --git a/app/static/css/panels.css b/app/static/css/panels.css
index 4d2d9a3..7a704ae 100644
--- a/app/static/css/panels.css
+++ b/app/static/css/panels.css
@@ -95,6 +95,14 @@ table.dense tr:hover td { background: color-mix(in srgb, var(--accent) 5%, trans
 /* --- Mobile (≤480px) -------------------------------------------------- */
 
 @media (max-width: 480px) {
+  /* Force panels and their bodies to honour the parent grid cell
+     width, even when descendants (tables, code blocks, long URLs)
+     have intrinsic widths that exceed the viewport. min-width:0 is
+     the magic that lets flex/grid items shrink past min-content;
+     max-width:100% caps the box itself. */
+  .panel { min-width: 0; max-width: 100%; }
+  .panel-body { min-width: 0; max-width: 100%; }
+
   .panel-header {
     padding: 8px 10px;
     gap: 8px;
@@ -105,4 +113,19 @@ table.dense tr:hover td { background: color-mix(in srgb, var(--accent) 5%, trans
   /* Scroll panels lose some vertical room on small screens so the
      stacked layout doesn't push log/news off the fold. */
   .panel-body--scroll { max-height: 60vh; }
+
+  /* Tables: dropping white-space:nowrap lets long Symbol / Label cells
+     wrap to a second line instead of forcing the table wider than the
+     panel. Numeric cells stay nowrap since "−12.34%" wrapping would be
+     unreadable. */
+  table.dense { table-layout: auto; }
+  table.dense th, table.dense td { white-space: normal; }
+  table.dense .num { white-space: nowrap; }
+
+  /* Final safety net: if a descendant still insists on being wider
+     than the panel (e.g. a wide pre/code block in the AI output),
+     scroll it horizontally inside the panel rather than blowing the
+     whole page out. */
+  .panel-body pre,
+  .panel-body code { max-width: 100%; overflow-x: auto; }
 }