Wrap transcript card actions under the title on narrow screens

Polish pass on the translate panel: the four export buttons overflowed
both transcript cards at 390 px. Also record the headless-Chrome
translation run and a re-measured bench in D-WS4b.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

DESIGN.md

@@ -31,6 +31,8 @@ One BEM-ish class block per React component in `src/components/` (`.model-picker
 `.live-controls`, `.engine-toggle`, `.auth-panel`, `.update-toast`, …), with modifier classes like
 `-selected`, `-active`, `-disabled`. Interactive states use `:hover:enabled` and `:focus-visible`.
 `.visually-hidden` exists for screen-reader-only text.
+Card headers (`.transcript-header`: title + export/Copy buttons) wrap, so on a phone the buttons
+move under the title instead of overflowing the card.
 
 Secondary disclosures (`.storage-manager`, `.translate-panel`) share one look: a 12px-radius
 `--panel` card with a semibold `<summary>`, muted 0.85rem hints, outlined 8px buttons. Inside the