From 6459e8c43d5827ac0bee9397b77242e65cc184fe Mon Sep 17 00:00:00 2001
From: Giorgio Gilestro <giorgio@gilest.ro>
Date: Thu, 28 May 2026 19:10:58 +0200
Subject: [PATCH] mobile: wrap tabs, trim portfolio + markets bar columns
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Three pieces of phone-side feedback:

1. Indicator group tabs wrap onto multiple rows instead of
   horizontal-scrolling — every group is visible at a glance. Each
   button keeps its own bottom border so wrapped rows stay
   visually delimited; the container's bottom border is removed.

2. Portfolio holdings table hides Qty and Avg columns on mobile via
   the mobile-hide class (same mechanism as the indicator table).
   Remaining columns are the actionable ones: Ticker, Name, Last,
   P/L, %.

3. Markets bar at the bottom compacts to one row per chip —
   dot + code + change% only. The state word ("open" / "closed")
   is implied by the dot colour; the index label, price, and
   until-time are dropped on mobile. Grid columns drop their 220px
   floor so the full set fits the viewport without horizontal
   scroll (previously the bar scrolled within itself).
---
 app/static/css/dashboard.css          | 16 ++++++---
 app/static/css/layout.css             | 48 +++++++++++++++++++++------
 app/templates/partials/portfolio.html |  8 ++---
 3 files changed, 53 insertions(+), 19 deletions(-)

diff --git a/app/static/css/dashboard.css b/app/static/css/dashboard.css
index aae9b6a..9cf1e98 100644
--- a/app/static/css/dashboard.css
+++ b/app/static/css/dashboard.css
@@ -248,11 +248,19 @@
      identifying anchor. */
   .dense td.label { font-weight: 600; }
 
-  /* Group-tabs strip already has overflow-x:auto; widen the tap
-     targets so swipe-scrolling on a touchscreen feels natural. */
+  /* Group tabs: wrap onto multiple rows instead of horizontal
+     scrolling so the user can see every group at a glance. The
+     border-bottom moves to each row so wrapped rows are still
+     visually delimited. */
+  .group-tabs {
+    flex-wrap: wrap;
+    overflow-x: visible;
+    border-bottom: 0;
+  }
   .group-tabs button {
-    padding: 8px 14px;
-    font-size: 11.5px;
+    padding: 6px 10px;
+    font-size: 11px;
+    border-bottom: 1px solid var(--border);
     white-space: nowrap;
   }
 
diff --git a/app/static/css/layout.css b/app/static/css/layout.css
index 1d2db25..748b8db 100644
--- a/app/static/css/layout.css
+++ b/app/static/css/layout.css
@@ -386,19 +386,45 @@ body.drawer-open .drawer-backdrop { opacity: 1; }
   }
   .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
-     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: compact each chip so the full set fits the viewport
+     without horizontal scrolling. We drop:
+       - state word ("open" / "closed") — the dot already conveys that
+       - index label (e.g. "SPX") — implied by the market code
+       - index price — keep the change% which is the actionable number
+       - until-time — too detailed for a glance
+     Remaining: dot + market code + change%. The grid keeps auto-fit
+     but the minimum drops from 220px to 0 so it always fits. */
   .markets-bar__inner {
-    grid-template-columns: none;
-    display: flex;
-    overflow-x: auto;
-    -webkit-overflow-scrolling: touch;
+    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+    gap: 0;
   }
   .markets-bar .mkt {
-    flex: 0 0 auto;
-    min-width: 160px;
+    grid-template-columns: auto 1fr auto;
+    grid-template-rows: auto;
+    padding: 5px 6px;
+    gap: 4px;
+    font-size: 10px;
   }
+  /* Re-flow the chip's grid so it's a single row of three: dot,
+     code, change. The 2-row layout (which had state/when on row 2)
+     is dropped along with the elements that lived there. */
+  .markets-bar .mkt .mkt__dot {
+    grid-row: 1; grid-column: 1;
+    width: 6px; height: 6px;
+  }
+  .markets-bar .mkt .mkt__name {
+    grid-row: 1; grid-column: 2;
+    font-size: 10px;
+    letter-spacing: 0.04em;
+  }
+  .markets-bar .mkt .mkt__index {
+    grid-row: 1; grid-column: 3;
+    font-size: 10px;
+  }
+  /* Strip the now-redundant content. The elements still render but
+     occupy no space so the chip stays narrow. */
+  .markets-bar .mkt__state,
+  .markets-bar .mkt__when,
+  .markets-bar .mkt__index-label,
+  .markets-bar .mkt__index-price { display: none; }
 }
diff --git a/app/templates/partials/portfolio.html b/app/templates/partials/portfolio.html
index 18061f9..99d4dc0 100644
--- a/app/templates/partials/portfolio.html
+++ b/app/templates/partials/portfolio.html
@@ -51,8 +51,8 @@
       <tr>
         <th>Ticker</th>
         <th>Name</th>
-        <th class="num">Qty</th>
-        <th class="num">Avg</th>
+        <th class="num mobile-hide">Qty</th>
+        <th class="num mobile-hide">Avg</th>
         <th class="num">Last</th>
         <th class="num">P/L</th>
         <th class="num">%</th>
@@ -63,8 +63,8 @@
       <tr>
         <td class="label">{{ pos.ticker }}</td>
         <td>{{ pos.name or "" }}</td>
-        <td class="num">{{ pos.quantity | price }}</td>
-        <td class="num neu">{{ pos.average_price | price }}</td>
+        <td class="num mobile-hide">{{ pos.quantity | price }}</td>
+        <td class="num neu mobile-hide">{{ pos.average_price | price }}</td>
         <td class="num">{{ pos.current_price | price }}</td>
         <td class="num {% if pos.ppl is none %}neu{% elif pos.ppl >= 0 %}pos{% else %}neg{% endif %}">
           {{ pos.ppl | signed }}