Flaky e2e: /podcasts 320px overflow check measures the pre-CSS layout

[schmug]

Task

Fix the intermittently-failing Playwright test e2e/narrow-viewport.spec.ts:45 → 320px viewport › /podcasts has no horizontal overflow. It fails on main itself, not just on PR branches, and it blocks auto-merge on every open PR when it trips.

Observed on main at 77fbf3b (run 33226807172) and on #218 (run 33229042295, passed on re-run). Of the 8 most recent main runs, 4 failed; commit b2c81f5 both passed and failed the same check on different runs, so this is a race, not a deterministic layout bug.

Failure

Error: elements wider than the 320px viewport
+   "<img class=\"h-20 w-20 shrink-0 rounded-md border border-[var(--color-border)]\">",
+   "<img class=\"h-20 w-20 shrink-0 rounded-md border border-[var(--color-border)]\">",

Diagnosis

src/pages/podcasts.astro:38-43 renders the cover art with intrinsic-size attributes for CLS:

<img src={show.coverSrc} width="1400" height="1400"
     class="h-20 w-20 shrink-0 rounded-md border border-[var(--color-border)]" />

width="1400" lays the image out at 1400px until the stylesheet applies w-20 (80px). The test navigates with waitUntil: 'domcontentloaded' (e2e/narrow-viewport.spec.ts:46), which can fire before the CSS is parsed and applied — so it sometimes measures the pre-CSS layout and sees two 1400px images spilling past the 320px viewport.

/podcast and /frontier-commits use the same pattern and are equally exposed; only /podcasts has tripped so far.

Decide between (recommend the first)

1. Test-side: navigate with waitUntil: 'load', or await stylesheet application before measuring. The overflow is not real for a user — it exists only in an unstyled frame — so asserting on the unstyled layout is the actual defect.
2. Source-side: add style="width:5rem;height:5rem" or drop the intrinsic attributes in favour of an aspect-ratio box, so the pre-CSS layout never exceeds the viewport.

Do not simply widen the tolerance or skip the page — the check catches real overflow regressions.

Acceptance criteria

1. npm run test:e2e passes, and the 320px /podcasts case is stable across at least 5 consecutive runs.
2. Whatever fix is chosen applies to /podcast and /frontier-commits too, if they share the cause.
3. The check still fails when an element genuinely overflows at 320px — prove it by temporarily widening an element.
4. npm run format:check && npm run lint && npm run typecheck && npm test && npm run build all pass.

Out of scope

• Redesigning the podcasts index layout
• Any other Playwright suite

Found while implementing #217 (#218); unrelated to that change.