# S03: Key Moment Card Redesign — UAT

**Milestone:** M005
**Written:** 2026-03-30T08:57:05.630Z

# S03 UAT: Key Moment Card Redesign

## Preconditions
- Chrysopedia web UI running at http://ub01:8096
- At least one technique page exists with key moments that have source filenames, timestamps, and content type badges
- Desktop browser at ≥1024px viewport width (so 2-column layout is active)

## Test Cases

### TC1: Title displays on its own line
1. Navigate to any technique page (e.g., http://ub01:8096/technique/{slug})
2. Scroll to the Key Moments section in the right sidebar
3. **Expected:** Each key moment card shows the title text on its own line, visually separated from the metadata below it
4. **Expected:** Title text is bold (font-weight 600) and sized at ~15px (0.9375rem)
5. **Expected:** Title does not share a line with source filename, timestamp, or content type badge

### TC2: Metadata row layout
1. On the same technique page, inspect the row below each key moment title
2. **Expected:** Source filename (if present), timestamp range (e.g., "1:23 – 2:45"), and content type badge appear on a single flex row
3. **Expected:** Items are horizontally aligned with consistent spacing between them
4. **Expected:** If the metadata wraps at narrow sidebar width, it wraps cleanly (flex-wrap) without overlapping the title or summary

### TC3: Summary paragraph placement
1. Below the metadata row, verify the summary text
2. **Expected:** Summary paragraph appears below the metadata row, not interleaved with title or metadata
3. **Expected:** Summary text is visually distinct from the title (lighter weight, standard font size)

### TC4: Cards without source filename
1. Find a key moment card where `video_filename` is null/empty (or verify behavior if all moments have filenames)
2. **Expected:** The metadata row shows only timestamp and content type badge — no empty space or broken layout where the filename would be

### TC5: Semantic HTML structure
1. Open browser DevTools on a technique page
2. Inspect a key moment card's DOM structure
3. **Expected:** Title is an `<h3>` element with class `technique-moment__title`
4. **Expected:** Metadata wrapper is a `<div>` with class `technique-moment__meta`
5. **Expected:** No elements with class `technique-moment__header` exist anywhere on the page

### TC6: Mobile single-column layout
1. Resize browser to ≤768px width (or use device emulation)
2. Navigate to a technique page
3. **Expected:** Key moment cards still render correctly in single-column layout
4. **Expected:** Title still on its own line, metadata row still below it, no layout breakage

### TC7: No visual regression on shared badge styles
1. Check that `.badge--content-type` badges on key moment cards look identical to badges used elsewhere in the app (e.g., on topic pages or search results)
2. **Expected:** Badge color, padding, border-radius, and font-size are unchanged
