giorgio/read.markets
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

mobile: clamp grid items + table cells to viewport width

Browse source 
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.
This commit is contained in:
Giorgio Gilestro 2026-05-28 19:02:30 +02:00
parent 5ceee96135
commit 8ec4ea1c72
2 changed files with 41 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

23
app/static/css/panels.css
View file

@ -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; }
}