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

## Summary

Straightforward CSS fix — no new technology, no architectural changes. The technique page has several elements that overflow on narrow viewports (~412px CSS width for Galaxy S25 Ultra). The existing 768px breakpoint collapses the two-column grid but doesn't address tag wrapping, metadata spacing, or element sizing. A single CSS-only task in `App.css` targeting the `@media (max-width: 768px)` and/or `@media (max-width: 640px)` blocks.

## Recommendation

Single task: add mobile-specific CSS rules for technique page elements that overflow. All work in `frontend/src/App.css`. No TSX changes needed.

## Implementation Landscape

### File: `frontend/src/App.css` (3150 lines)

**Existing breakpoints:**
- `@media (max-width: 768px)` at line 1357 — only has technique grid collapse (1fr) and sidebar un-sticky
- `@media (max-width: 640px)` at line 812 — admin/queue responsive rules + header stack
- `@media (max-width: 640px)` at line 2106 — public page responsive rules (home hero, nav, creators, topics)

**Overflow sources identified on technique page (target: 412px viewport):**

1. **`.technique-header__tags` (line 1414)** — `display: inline-flex; gap: 0.25rem` with **no `flex-wrap: wrap`**. Multiple topic tags will blow out horizontally on any narrow viewport. Fix: add `flex-wrap: wrap`.

2. **`.technique-header__creator-genres`** — rendered in TSX but has **no CSS rule at all**. It's a bare `<span>` containing pill elements. If a creator has multiple genre tags, they'll just inline without wrapping. Fix: add a rule with `display: inline-flex; flex-wrap: wrap; gap: 0.25rem`.

3. **`.technique-header__meta` (line 1408)** — has `flex-wrap: wrap` ✅, but children (category badge + tags span + quality badge) have no `max-width` constraint. The inline-flex tags span inside this doesn't wrap (see #1). Fixing #1 cascades here.

4. **`.version-switcher__select` (line 2521)** — could be wide with long "v3 — Mar 30, 2026, 02:15 PM" text. Fix: add `max-width: 100%` or truncation in the 640px breakpoint.

5. **`.technique-chain__flow` (line 1586)** — monospace font, `display: flex; flex-wrap: wrap` ✅. Already wraps correctly. No fix needed.

6. **`.technique-prose__json` (line 1484)** — `overflow-x: auto` ✅. Scrolls on overflow. No fix needed.

7. **`.technique-moment__source` (line 1544)** — already fixed in S05: `max-width: 100%; overflow: hidden; text-overflow: ellipsis` ✅.

8. **`.technique-page` (line 1338)** — `max-width: 64rem` with no padding. Relies on `.app-main` padding (0 1.5rem). On mobile the 1.5rem side padding is fine but could be reduced to 1rem for more breathing room.

9. **`.technique-banner--version` (line ~2548)** — `display: flex` with inline button. On narrow viewport the button may push content off-screen. Fix: add `flex-wrap: wrap` in mobile breakpoint.

**Global elements (already handled):**
- `html, body` have `overflow-x: hidden` (line 149) — catches any stray overflow
- `.app-header` stacks vertically at 640px ✅
- `.app-nav` gaps reduce at 640px ✅
- `.app-main` padding: `0 1.5rem` — sufficient for mobile

### What doesn't need changing:
- Grid collapse at 768px already works
- Key moment cards (fixed in S05)
- Signal chain flow (already wraps)
- JSON pre blocks (already scroll)
- Search results page (already has flex-wrap)
- Home page (already has 640px rules)
- Creators/Topics pages (already have 640px rules)

### Verification approach

1. `npm run build` — zero TypeScript/build errors
2. Grep for all new CSS properties to confirm they're in the right selectors
3. Optionally: run dev server → browser emulate Galaxy S25 Ultra (412×915) → navigate to a technique page → verify no horizontal scroll

### Natural task decomposition

This is a **single task** — all changes are CSS property additions/modifications in one file (`App.css`). The changes are:

1. Add `flex-wrap: wrap` to `.technique-header__tags`
2. Add `.technique-header__creator-genres` rule with `display: inline-flex; flex-wrap: wrap; gap: 0.25rem`
3. In `@media (max-width: 640px)` public section (~line 2106), add:
   - `.technique-header__title` already shrinks font ✅
   - `.version-switcher__select { max-width: 10rem; overflow: hidden; text-overflow: ellipsis }`
   - `.technique-banner--version { flex-wrap: wrap; gap: 0.5rem }`
   - `.app-main { padding: 0 1rem }` (tighter mobile padding)
   - `.technique-header__meta { gap: 0.375rem }` (tighter gap)
4. Optionally reduce `technique-header__title` font further at 400px if 1.375rem still feels large

No TSX changes. No new files. No new dependencies.
