fix(gui): resolve mobile horizontal overflow + table scroll + accent checkboxes

Audited Providers/Models/Subagents/Logs (clean in light) and stress-tested
mobile, which exposed a global horizontal-overflow bug: the sticky top-bar
nav (5 nowrap tabs) wasn't shrinking, inflating the shared grid column so
every page scrolled sideways. Fix: min-width:0 on .sidebar and .sidebar nav
so the tab strip scrolls internally instead of forcing the column wide.

Also: tables scroll horizontally on mobile (.tbl-wrap overflow-x:auto +
mobile .tbl min-width) instead of clipping; .stat-row minmax(0,1fr) guard;
accent-color on native checkboxes (Logs Auto-refresh) to match indigo.

CSS-only. gui build + root tsc clean; 94 tests pass; mobile re-verified by
screenshot (Dashboard tiles fit + table scrolls in-card; Logs no page scroll).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: lidge-jun

devlog/160_dashboard-redesign-and-media-models/12_mobile-overflow-and-page-audit.md

@@ -0,0 +1,53 @@
+# 160.12 — Phase 1.2: Mobile Overflow Fix + Remaining-Page Audit
+
+- **Status:** Done
+- **Date:** 2026-06-20
+- **Work class:** C2 (gui CSS only, reversible)
+- **Follows:** [11_dashboard-refinements.md](11_dashboard-refinements.md)
+
+## Why
+
+The objective is console-wide ("전반적으로 ui ux ... 더 미려한"), but only the Dashboard had
+been verified in light/dark/mobile. Audited the other four pages and stress-tested mobile.
+
+## Audit result (Providers / Models / Subagents / Logs)
+
+Screenshotted each in light desktop — all render cleanly and consistently via the shared token
+system (indigo toggles, provider cards, login panel, featured/search lists). No per-page work
+needed. **But mobile exposed a real bug.**
+
+## Bug: global horizontal overflow on mobile (root-caused)
+
+Every page (even Logs, which has no table) scrolled horizontally at ≤760px — stat tiles and
+content cut off, page-level scrollbar. Diagnosis by elimination (Logs has no table yet
+overflowed → not the table → global → the sidebar):
+
+- The mobile top-bar `.sidebar nav` is a horizontal strip of 5 nowrap tabs (~500px of content)
+  with `overflow-x: auto`. As a flex item with `flex: 1 1 100%` it was **not shrinking** — its
+  content width fed the grid column's `auto` minimum. Since the sticky sidebar shares the single
+  grid column with `.main`, that forced **every page's** content wider than the viewport.
+- `.main` already had `min-width: 0`; `.sidebar` did not.
+
+**Fix** (the classic flexbox overflow cure): `min-width: 0` on `.sidebar` (so its content can't
+inflate the grid column) and on `.sidebar nav` (so the tab strip shrinks to the viewport and
+scrolls internally instead of overflowing).
+
+## Other mobile/polish fixes (same pass)
+
+- `.tbl-wrap`: `overflow: hidden` → `overflow-x: auto`, plus mobile `.tbl { min-width: 460px }`
+  — data tables (Dashboard providers, Logs) now **scroll horizontally within their card** on
+  mobile instead of clipping the MODEL column (dev-frontend mobile-ux: "data table → horizontal scroll").
+- `.stat-row` mobile: `repeat(2, 1fr)` → `repeat(2, minmax(0, 1fr))` — defensive guard against
+  grid track blowout.
+- `input[type=checkbox|radio] { accent-color: var(--accent) }` — native controls (Logs
+  "Auto-refresh") now match the indigo accent instead of browser blue.
+
+## Files
+- `gui/src/styles.css` (CSS only; no TSX change).
+
+## Verification
+- `bun run build` (tsc -b && vite build) → clean.
+- `bun x tsc --noEmit` exit 0; `bun test tests` → **94 pass / 0 fail**.
+- Mobile (390px) re-screenshot: Dashboard tiles fit + providers table scrolls in-card; Logs
+  title/empty-state fit with **no page scrollbar**. Confirmed both light layout and the grouped
+  model list (ANTHROPIC 10 + OPENCODE-GO 20) render correctly.

gui/src/styles.css

@@ -76,6 +76,9 @@ h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -0.01em; }
 
 ::selection { background: var(--accent-soft); }
 
+/* native controls (checkbox/radio) follow the accent instead of browser blue */
+input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }
+
 /* scrollbars */
 *::-webkit-scrollbar { width: 10px; height: 10px; }
 *::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; border: 2px solid var(--bg); }
@@ -190,7 +193,7 @@ h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -0.01em; }
 .tbl tbody tr:last-child td { border-bottom: none; }
 .tbl tbody tr:hover td { background: var(--hover); }
 .tbl .num { text-align: right; font-family: var(--mono); }
-.tbl-wrap { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
+.tbl-wrap { border: 1px solid var(--border); border-radius: var(--radius); overflow-x: auto; }
 
 /* ---- inputs ---- */
 .input, textarea.input {
@@ -258,7 +261,7 @@ select.input { appearance: none; }
   .sidebar {
     position: sticky; top: 0; z-index: 20; height: auto;
     flex-flow: row wrap; align-items: center; gap: 0;
-    padding: 0 10px;
+    padding: 0 10px; min-width: 0;   /* grid item: don't let nav content force the column wide */
     border-right: none; border-bottom: 1px solid var(--border);
     background: var(--rail);
   }
@@ -268,7 +271,7 @@ select.input { appearance: none; }
   .theme-toggle { min-height: 44px; min-width: 44px; justify-content: center; padding: 8px; }
   .theme-toggle .mode { display: none; }                /* icon-only toggle on mobile */
   .sidebar nav {
-    order: 3; flex: 1 1 100%;
+    order: 3; flex: 1 1 100%; min-width: 0;   /* allow shrink below content so tabs scroll, not overflow */
     display: flex; flex-direction: row; gap: 2px;
     overflow-x: auto; overscroll-behavior-x: contain;
     padding: 4px 0 8px; margin: 0;
@@ -278,5 +281,6 @@ select.input { appearance: none; }
   .sidebar nav::-webkit-scrollbar { display: none; }
   .nav-item { width: auto; white-space: nowrap; min-height: 44px; padding: 9px 14px; font-size: 14px; }
   .main-inner { padding: 22px 18px 48px; }
-  .stat-row { grid-template-columns: repeat(2, 1fr); }
+  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .tbl { min-width: 460px; }   /* keep columns readable; .tbl-wrap scrolls horizontally */
 }