---
id: 1489b1c1-1014-4bb1-b28d-3eca6f811267
title: 'Responsive fixes: nav reachable at 390px, files table, clone summary wrapping'
state: closed
labels:
- ui
assignees: []
milestone: null
created: 2026-10-27T15:28:04.402586655Z
updated: 2026-10-27T16:33:02.957230353Z
---
At 390px the site is usable-ish but broken in three specific places.

### 1. Nav is unreachable
`.site-nav` is `display:flex;flex-wrap:wrap` but `.nav-scroll-row` holds everything on one line, and `body{overflow-x:clip}` clips the overflow. At 390px only `code · commits · issues (14)` is visible — **pulls, ci, releases, wiki, agents cannot be reached**. No scroll affordance, no strip, no menu.

### 2. Files table is cramped, not scrollable
`.file-scroll` is deliberately exempt from the mobile card layout (m6/cards2, f0rge #46) and is supposed to scroll horizontally, but at 390px "Last commit" wraps to 3–4 lines per row while "Age" is clipped at the right edge. Row heights blow up, the table reads as broken rather than scrollable.

### 3. Clone summary wraps mid-token
`Clone & download · master @ 6f379f8 · CI [pass]` wraps so `pass` lands alone on line 2, and the summary line uses `--muted` (below AA).

### Also
- Issue/PR meta blocks become six full-width lines on mobile (see the meta issue #72 — collapse to chips + `<details>`).
- Touch targets: nav links are `min-height:40px` (good); table row links are text-only; `.btn-new` is ~40px tall (good).
- No horizontal scroll indicator anywhere.

### Scope
- **Nav**: one-row horizontally scrollable strip with edge fade (`overflow-x:auto; scrollbar-width:none`) *or* wrap into two rows; ensure every tab is reachable at 320/390/768. Keep `aria-current`.
- **Files table**: at `<768px` either drop the "Last commit" column (keep name + age, both real links), or let `.file-scroll` genuinely scroll with `width:max-content` and a scroll hint. Do not wrap commit subjects into 4 lines.
- **Clone block**: `summary` becomes a two-line block on mobile (title, then `branch @ sha · CI badge`), no mid-token wrap (`white-space` per segment / flex-wrap with gap).
- Test at 320, 360, 390, 768 (existing `tests/responsive.rs` can assert the rules, e.g. nav overflow-x and `.file-scroll` width behaviour).

### Acceptance
- [ ] all 8 nav destinations reachable at 390px
- [ ] file table does not wrap commit subjects to >2 lines and does not clip the age column
- [ ] clone summary badge never splits from its label
- [ ] no page-level horizontal scroll at 390px