# S06: Mobile Viewport Overflow Fix — Technique Pages and Global Content

**Goal:** Technique pages and global content render cleanly on mobile viewports (~412px) — no horizontal overflow, tags wrap, metadata stays within bounds.
**Demo:** After this: Technique page on Galaxy S25 Ultra renders cleanly — body text wraps, tags don't overflow, metadata stays within viewport, no horizontal scroll

## Tasks
- [x] **T01: Added flex-wrap, max-width, and tighter mobile gaps to prevent horizontal overflow on ~412px viewports** — Add CSS rules to `frontend/src/App.css` that prevent horizontal overflow on narrow viewports (~412px Galaxy S25 Ultra). CSS-only task — no TSX changes.

**Context:** The technique page has several elements that overflow on mobile:
1. `.technique-header__tags` — `display: inline-flex` with no `flex-wrap: wrap`, so multiple topic tags blow out horizontally
2. `.technique-header__creator-genres` — rendered in TechniquePage.tsx (line 235) with class `technique-header__creator-genres` but has **zero CSS rules**. Genre pill elements inline without wrapping.
3. `.version-switcher__select` (line ~2521) — can be wide with long version text like "v3 — Mar 30, 2026, 02:15 PM"
4. `.app-main` (line 199) — has `padding: 0 1.5rem` which is generous for mobile; tighten to 1rem
5. `.technique-header__meta` (line ~1408) — `flex-wrap: wrap` already present but gap could be tighter on mobile

**What already works (do NOT touch):**
- `.technique-banner--version` already has `flex-wrap: wrap` ✅
- `.technique-chain__flow` already wraps ✅
- `.technique-prose__json` already has `overflow-x: auto` ✅
- `.technique-moment__source` fixed in S05 ✅
- `html, body` have `overflow-x: hidden` ✅
  - Estimate: 20m
  - Files: frontend/src/App.css
  - Verify: cd frontend && npm run build && echo '--- Build OK ---' && cd .. && grep -q 'flex-wrap: wrap' frontend/src/App.css && grep -q 'technique-header__creator-genres' frontend/src/App.css && echo '--- All checks passed ---'
