# S05 Research — Key Moment Card Text Overflow Fix

## Summary

Key moment cards live in the technique page **sidebar** (22rem wide, in `TechniquePage.tsx` lines ~430–460). The sidebar is a CSS grid column (`technique-columns__sidebar`) that collapses to full-width at 768px. Long filenames and moment titles can overflow the card bounds because the container has no `overflow: hidden` and the title element has no truncation CSS.

This is a straightforward CSS fix — no new components, no API changes, no structural markup changes needed.

## Recommendation

Add overflow protection at three levels:
1. **Card container** (`.technique-moment`) — add `overflow: hidden` to clip any runaway children
2. **Title** (`.technique-moment__title`) — add `overflow: hidden; text-overflow: ellipsis; white-space: nowrap` (or allow wrapping with `word-break: break-word` — wrapping is probably better for titles since truncation loses meaning)
3. **Source filename** (`.technique-moment__source`) — change `max-width: 20rem` to `max-width: 100%` so it respects the actual container width instead of a fixed value that may exceed the sidebar

## Implementation Landscape

### Files to modify

| File | What | Lines |
|------|------|-------|
| `frontend/src/App.css` | CSS overflow fixes on `.technique-moment`, `.technique-moment__title`, `.technique-moment__source` | ~1512–1555 |

One file, one task. No TSX markup changes needed — the existing class names cover all the elements.

### Current state (what exists)

**Markup** (`TechniquePage.tsx` ~436–458):
```
li.technique-moment
  h3.technique-moment__title         → moment title text
  div.technique-moment__meta         → flex row, flex-wrap: wrap ✓
    span.technique-moment__source    → video filename (monospace)
    span.technique-moment__time      → "00:12 – 01:45"
    span.badge.badge--content-type   → e.g. "tutorial"
  p.technique-moment__summary        → summary paragraph
```

**CSS** (`App.css` ~1512–1555):
- `.technique-moment` — `padding: 0.875rem 1rem; background; border; border-radius` — **no overflow handling**
- `.technique-moment__title` — `font-size/weight/line-height` — **no overflow handling**
- `.technique-moment__meta` — `display: flex; flex-wrap: wrap; gap: 0.5rem` — wrapping is good
- `.technique-moment__source` — has `overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 20rem` — **max-width is too large** (sidebar is ~20rem after padding, so 20rem source can still bleed)
- `.technique-moment__summary` — basic text styles, no overflow issue (natural word wrap)

**Container context:**
- Sidebar column: `22rem` fixed width (`technique-columns`, grid)
- Card inner width: ~20rem (22rem - 2×1rem padding)
- At mobile (≤768px): sidebar becomes `1fr` (full viewport width), same overflow risk on very narrow screens

### Specific CSS changes needed

1. `.technique-moment` — add `overflow: hidden` (clip any child that escapes)
2. `.technique-moment__title` — add `word-break: break-word` (long titles wrap instead of truncate — titles are meaningful and shouldn't be clipped)
3. `.technique-moment__source` — change `max-width: 20rem` → `max-width: 100%` (respect actual container width)
4. `.technique-moment__meta` — add `min-width: 0` (flex container needs this for truncation of flex children to work reliably)

### Verification

- `cd frontend && npm run build` — zero errors
- Visual check: load a technique page with long filenames and verify no horizontal overflow on the card or page

### Constraints and non-issues

- No TSX changes needed
- No API changes
- Summary text (`.technique-moment__summary`) already wraps naturally — no fix needed
- Badge (`.badge--content-type`) is short text, inline-block in a wrapping flex row — no fix needed
- Time spans are fixed-format short strings — no fix needed
