# S02: Technique Page 2-Column Layout — UAT

**Milestone:** M005
**Written:** 2026-03-30T08:49:31.884Z

## UAT: Technique Page 2-Column Layout

### Preconditions
- Chrysopedia web UI accessible at http://ub01:8096
- At least one technique page exists with key moments, signal chains, or plugins populated

### Test Cases

#### TC1: Desktop 2-Column Layout
1. Open http://ub01:8096/techniques/ in a desktop browser (viewport ≥1024px wide)
2. Click any technique with key moments listed
3. **Expected:** Page header (title, tags, creator info) spans full width
4. **Expected:** Below the header, content splits into two columns — prose (summary + study guide sections) on the left, sidebar (key moments, signal chains, plugins, related techniques) on the right
5. **Expected:** Sidebar is approximately 22rem wide; main content fills remaining space
6. **Expected:** 2rem gap visible between columns

#### TC2: Sticky Sidebar
1. On the same technique page at desktop width, scroll down through the prose content
2. **Expected:** The sidebar remains pinned near the top of the viewport (sticky at ~1.5rem from top) while the main content scrolls
3. **Expected:** If sidebar content is taller than the viewport, it scrolls independently

#### TC3: Mobile Single-Column Collapse
1. Resize browser window to ≤768px width (or use DevTools mobile emulation at 375px)
2. **Expected:** Layout collapses to a single column — all content stacks vertically
3. **Expected:** Sidebar content (key moments, etc.) appears below the prose content, not beside it
4. **Expected:** Sidebar is no longer sticky — it scrolls naturally with the page

#### TC4: Page Width
1. At desktop width, inspect the technique page container
2. **Expected:** Max-width is 64rem (was previously 48rem), providing enough horizontal room for both columns

#### TC5: No Visual Regressions
1. Navigate to a technique page with all sections populated (summary, body sections, key moments, signal chains, plugins, related techniques)
2. **Expected:** All sections render correctly — no overlapping text, no content cut off, no broken spacing
3. **Expected:** Existing styling (colors, typography, badges, cards) is unchanged
4. **Expected:** Dark theme custom properties still apply — no raw hex colors visible in new layout elements

#### TC6: Empty Sidebar Sections
1. Navigate to a technique page that has no plugins or no signal chains
2. **Expected:** Empty sections are absent from the sidebar (not rendered as blank space)
3. **Expected:** The remaining sidebar sections display correctly without extra gaps

### Edge Cases

#### EC1: Very Long Prose Content
1. Find or create a technique with many body sections (5+ sub-headings)
2. **Expected:** Main column handles the long content naturally — no overflow, no grid blowout
3. **Expected:** Sidebar sticky behavior works correctly during extended scrolling

#### EC2: Technique with Many Key Moments
1. Find a technique with 10+ key moments
2. **Expected:** Sidebar handles the long list — scrollable within the viewport if needed
3. **Expected:** At mobile widths, the moment list displays fully in the single-column flow
