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

**Milestone:** M007
**Written:** 2026-03-30T19:49:14.516Z

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

### Preconditions
- Chrysopedia web UI running (http://ub01:8096)
- At least one technique page with multiple topic tags and genre pills exists
- Browser DevTools available for viewport emulation

### Test Cases

#### TC1: Topic Tags Wrap on 412px Viewport
1. Open browser DevTools → Device toolbar → set to Galaxy S25 Ultra (412px wide) or custom 412×915
2. Navigate to a technique page that has 3+ topic tags
3. **Expected:** Tags wrap to multiple lines — no horizontal scrollbar appears on the page
4. Resize viewport to 320px
5. **Expected:** Tags still wrap cleanly, no overflow

#### TC2: Creator Genre Pills Wrap
1. With 412px viewport, navigate to a technique page that displays creator genre pills
2. **Expected:** Genre pills wrap to multiple lines within the header area — no horizontal overflow
3. **Expected:** Consistent gap between pills (0.375rem on mobile)

#### TC3: Version Switcher Truncation
1. With 412px viewport, navigate to a technique page that has version history (version switcher visible)
2. **Expected:** Version switcher select element does not exceed ~12rem width
3. If version text is long (e.g., "v3 — Mar 30, 2026, 02:15 PM"), **Expected:** text truncates with ellipsis

#### TC4: App Main Padding on Mobile
1. With 412px viewport, navigate to any page
2. Inspect `.app-main` element in DevTools
3. **Expected:** Left and right padding is 1rem (not 1.5rem) at viewport ≤640px

#### TC5: Technique Header Meta Compact on Mobile
1. With 412px viewport, navigate to a technique page
2. Inspect `.technique-header__meta` element
3. **Expected:** Gap between meta items is 0.375rem (not the desktop gap) at viewport ≤640px

#### TC6: No Horizontal Scroll on Full Page
1. With 412px viewport, navigate through 3 different technique pages
2. For each page, attempt to scroll horizontally
3. **Expected:** No horizontal scroll is possible on any page — all content fits within viewport width

### Edge Cases

#### EC1: Technique Page with Maximum Tags
- Find or create a technique page with 8+ topic tags
- At 412px viewport, tags should wrap across 2-3 rows without breaking layout

#### EC2: Very Long Creator Name + Genre Combination
- If a creator has a long name and multiple genres, verify the header section stays within bounds at 320px
