From 5ceee961352b020e6754dbfb4c212e56d5335a68 Mon Sep 17 00:00:00 2001
From: Giorgio Gilestro <giorgio@gilest.ro>
Date: Thu, 28 May 2026 18:55:04 +0200
Subject: [PATCH] mobile: fix drawer stacking + horizontal page overflow
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 app/static/css/layout.css | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/app/static/css/layout.css b/app/static/css/layout.css
index 2a66ccc..2d6fe80 100644
--- a/app/static/css/layout.css
+++ b/app/static/css/layout.css
@@ -10,6 +10,10 @@ html, body {
   font-size: 13px;
   line-height: 1.5;
   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; }
@@ -235,6 +239,13 @@ body.drawer-open .drawer-backdrop { opacity: 1; }
     gap: 8px;
     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 {
     font-size: 12px;
     /* 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
      bubbles all benefit from. */
   .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;
+  }
 }