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

mobile: fix drawer stacking + horizontal page overflow

Browse source 
Two related bugs reported on phone:

1. Drawer was unclickable — backdrop covered it. Root cause: the
   .app-header (position:sticky, z-index:50) creates a stacking
   context, so the drawer inside it had its z-index:100 clamped to
   "above other things inside the header" but NOT above siblings of
   the header. The backdrop at root-level z:90 then sat over the
   drawer subtree.

   Fix: when body.drawer-open, raise .app-header z-index to 110
   so its entire descendant tree (drawer included) draws above the
   z:90 backdrop. The page body under the header stays dimmed.

2. Horizontal scrolling on the dashboard. Root cause: the bottom
   markets bar used `grid-template-columns: repeat(auto-fit,
   minmax(220px, 1fr))`, which at 4+ markets blows out to 880px+ and
   forces the page wider than the viewport.

   Fix: on ≤480px the markets bar becomes a horizontally scrolling
   flex strip with min-width:160px per chip — page stays narrow,
   user swipes the bar to see more markets.

Also added overflow-x:hidden to html/body as a defensive net against
the fixed off-screen drawer creating overflow on Safari iOS.
This commit is contained in:
Giorgio Gilestro 2026-05-28 18:55:04 +02:00
parent b6da1983d3
commit 5ceee96135
1 changed files with 27 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

27
app/static/css/layout.css
View file

@ -10,6 +10,10 @@ html, body {
font-size: 13px; font-size: 13px;
line-height: 1.5; line-height: 1.5;
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
/* Prevents the off-screen fixed mobile drawer (translateX(100%))
from forcing horizontal scroll on Safari iOS, and provides a
safety net for any cell/grid that would otherwise overflow. */
overflow-x: hidden;
} }
a { color: var(--accent); text-decoration: none; } a { color: var(--accent); text-decoration: none; }
@ -235,6 +239,13 @@ body.drawer-open .drawer-backdrop { opacity: 1; }
gap: 8px; gap: 8px;
letter-spacing: 0.04em; letter-spacing: 0.04em;
} }
/* When the drawer is open the header (which contains the drawer)
needs to draw above the backdrop. The header is a sticky element
with its own stacking context at z-index 50, so the drawer's
local z-index 100 is clamped to z-50 in the root context — the
backdrop at z-90 then sits OVER it. Raise the whole header above
the backdrop while the drawer is open. */
body.drawer-open .app-header { z-index: 110; }
.app-header .brand { .app-header .brand {
font-size: 12px; font-size: 12px;
/* Shrink the leading glyph but don't remove it — keeps brand identity. */ /* Shrink the leading glyph but don't remove it — keeps brand identity. */
@ -358,4 +369,20 @@ body.drawer-open .drawer-backdrop { opacity: 1; }
of horizontal real estate which the indicator table and chat of horizontal real estate which the indicator table and chat
bubbles all benefit from. */ bubbles all benefit from. */
.app-main { padding: 10px 8px; gap: 10px; } .app-main { padding: 10px 8px; gap: 10px; }
/* Markets bar: the desktop grid uses minmax(220px, 1fr) per market,
which at 4+ markets blows out to 880px+ and forces page-wide
horizontal scroll. On phones, let the bar itself scroll
horizontally so the page can stay narrow. Each chip gets a
reasonable min-width so the values inside don't wrap. */
.markets-bar__inner {
grid-template-columns: none;
display: flex;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.markets-bar .mkt {
flex: 0 0 auto;
min-width: 160px;
}
} }