# S02 Research — Technique Page 2-Column Layout

## Summary

Straightforward CSS + React restructuring. The existing `TechniquePage.tsx` (~300 lines) renders everything in a single column at `max-width: 48rem`. The slice needs a 2-column layout at desktop widths (prose left, sidebar right) that collapses to single column on mobile. No new API endpoints, no new dependencies, no unfamiliar technology.

## Recommendation

One task for the layout restructuring (CSS grid + JSX reordering), one task for responsive/polish/verification. Low risk — all patterns (CSS grid, media queries, CSS custom properties) are already established in the codebase.

## Implementation Landscape

### Current Architecture

**TechniquePage.tsx** (`frontend/src/pages/TechniquePage.tsx`, ~300 lines):
- Renders sections top-to-bottom in this order:
  1. Back link
  2. Historical version banner (conditional)
  3. Unstructured content banner (conditional)
  4. Header (title, meta badges, tags, creator link, quality badge, stats line, version switcher + report button)
  5. Pipeline metadata for historical versions (conditional)
  6. Report modal (conditional)
  7. Summary paragraph
  8. Body sections (study guide prose from `body_sections` JSONB)
  9. Key Moments list (cards with title, source, time, type badge, summary)
  10. Signal Chains (name + step flow)
  11. Plugins (pill list)
  12. Related Techniques (link list)

**App.css** technique section (~200 lines of CSS, lines 1179–1420):
- `.technique-page { max-width: 48rem }` — needs to widen for 2-column layout
- All technique sub-sections use `margin-bottom: 1.5rem–2rem` vertical stacking
- Existing responsive breakpoint at `max-width: 640px` handles mobile
- 77 CSS custom properties in `:root` — all colors use variables, no hardcoded values

**Container context:**
- `.app-main { max-width: 72rem; margin: 1.5rem auto; padding: 0 1.5rem; }` — the outer container is already wide enough to accommodate 2 columns

### Column Assignment (per roadmap)

**Left column (prose/main content):**
- Summary
- Body sections (study guide prose)

**Right column (sidebar — moments/chains/plugins):**
- Key Moments list
- Signal Chains
- Plugins Referenced
- Related Techniques

**Full-width (above both columns):**
- Back link
- Banners (version, unstructured)
- Header (title, meta, stats, version switcher, report button)
- Pipeline metadata (version view)

### Approach

1. **Widen `.technique-page`** from `max-width: 48rem` to `max-width: 72rem` (matches `app-main`) or ~64rem to leave some breathing room.

2. **Add a CSS grid wrapper** for the 2-column area:
   ```css
   .technique-columns {
     display: grid;
     grid-template-columns: 1fr 22rem; /* ~350px sidebar */
     gap: 2rem;
     align-items: start;
   }
   ```

3. **Wrap JSX** in TechniquePage.tsx: after the header section, wrap summary + body_sections in a `<div className="technique-columns__main">` and moments + chains + plugins + related in a `<div className="technique-columns__sidebar">`, both inside a `.technique-columns` container.

4. **Responsive collapse** at a new breakpoint (~1024px or 768px):
   ```css
   @media (max-width: 768px) {
     .technique-columns {
       grid-template-columns: 1fr;
     }
   }
   ```

5. **Sidebar styling adjustments:** The sidebar sections (moments, chains, plugins, related) may need slightly tighter spacing/font sizes to fit the narrower column. Key moment cards should remain readable in ~22rem width — the current cards use flex-wrap on `.technique-moment__header` which will adapt.

### File Inventory

| File | Change Type | Notes |
|------|-------------|-------|
| `frontend/src/pages/TechniquePage.tsx` | Modify | Wrap sections in grid container divs. ~15 lines of JSX wrapper changes. No logic changes. |
| `frontend/src/App.css` | Modify | Add `.technique-columns` grid rules (~15 lines). Widen `.technique-page` max-width. Add responsive breakpoint. Minor sidebar spacing tweaks. |

### Key Constraints

- **Version overlay logic unchanged:** The `isHistorical` / `overlay` / `display*` variable pattern stays intact — only JSX structure around the rendered sections changes.
- **S03 dependency:** S03 (Key Moment Card Redesign) depends on S02. The moment cards will be restyled in S03, so S02 should not over-invest in moment card styling. Focus on getting the layout container right.
- **CSS custom properties:** Any new colors (unlikely for a layout change) must use `var(--*)` tokens per D017.
- **Single CSS file:** The project uses one `App.css` — no CSS modules or component-scoped styles. All new classes go in App.css under the technique page section.
- **Sidebar `position: sticky`:** Consider making `.technique-columns__sidebar` sticky (`position: sticky; top: 1.5rem`) so it stays visible while scrolling long prose. This is a polish enhancement, not required.
- **Existing 640px breakpoint:** The mobile breakpoint at 640px already handles `.technique-header__title` resizing. The new 2-column → 1-column collapse should happen at a wider breakpoint (768px) since 2 columns don't work below that.

### Verification

- `cd frontend && npx tsc --noEmit` — TypeScript check (no logic changes, but confirm no JSX errors)
- `cd frontend && npm run build` — production build succeeds
- Visual check in browser at http://ub01:8096/techniques/{any-slug}: prose on left, sidebar on right at desktop width
- Resize browser to <768px: single column layout
- Resize browser to <640px: existing mobile styles still work

### Natural Task Seams

**T01 — 2-Column Layout Implementation:** Modify TechniquePage.tsx to wrap sections in grid containers. Add CSS grid rules to App.css. Widen `.technique-page` max-width. Add responsive breakpoint. Build and verify.

This is compact enough for a single task. If splitting is desired:
- T01: CSS grid rules + `.technique-page` max-width change + responsive breakpoint (CSS only)
- T02: JSX restructuring in TechniquePage.tsx + build verification + visual check

But these are tightly coupled — splitting adds overhead for minimal benefit. One task is recommended.
