---
id: 16f0be47-0770-4390-8128-95ab17532ceb
title: 'Responsive design: mobile + desktop'
state: closed
labels:
- area:render
assignees: []
milestone: m6-polish
created: 2026-09-10T05:18:03.232563186Z
updated: 2026-09-10T05:24:19.392323114Z
---
Context: hu13's Tokyo Night style was built desktop-first. Owner will review the live site on mobile + desktop; it must be fully usable at 360px width.
Tasks:
1. `meta viewport` already in layout? verify, add if missing.
2. static/style.css responsive pass (stays <15KB, sharp corners, Tokyo Night):
   - fluid layout: `.wrap` max-width + side padding, no fixed pixel widths, no horizontal page scroll at 360px.
   - nav wraps (flex-wrap) so 8 tabs don't overflow on phones.
   - file/commit tables: wrap in horizontal-scroll container (table itself never breaks layout; `pre` gets `overflow-x: auto`).
   - header stacks (repo name + clone cmd + meta) on narrow; clone cmd + sha wrap/break-all safely.
   - touch targets >= 40px for nav links + form inputs + buttons; form fields full-width on mobile.
   - breakpoints: base = mobile single-column; >=768px two-col niceties (tree+readme side by side ONLY if it fits); >=1100px max-width container.
3. Keep zero JS, file:// compatible, reader-mode friendly.
4. Tests: assert viewport meta in layout output; assert media queries present in CSS; assert `pre`/`table` scroll wrappers in file + commit pages (string asserts on generated HTML from fixture build); CSS budget assert stays.
Success rubric:
- [ ] Fixture build HTML contains viewport meta; CSS contains >=2 media queries; no `width: <fixed>px` on layout containers (grep).
- [ ] 360px reasoning check: nav wraps, tables scroll in containers, forms full-width (supervisor + owner eyeball on live site).
- [ ] fmt+clippy+test green, CSS <15KB, still zero JS.
Swarm: Owl, well-specified. Branch `m6/responsive`.