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 <[email protected]>

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

docs/Decisions.md

@@ -1280,10 +1280,15 @@ onnxruntime-node). Batch 8 would be ~4× faster; re-measure with `scripts/bench-
 the Transformers.js upgrade (workstream 1) before raising `DEFAULT_TRANSLATE_BATCH_SIZE`.
 **Measured (onnxruntime-node, CPU, 16 cores shared with other workstreams; not browser numbers):**
 `en_alien.txt` (7 470 chars, 279 lines → 293 sentence pieces) en→da **58 s** (~128 chars/s,
-~0.2 s/sentence) in the bench, 76 s in the real-model test under load; `da_festuge.txt` (3 sentences)
+~0.2 s/sentence) in the bench (71 s / ~105 chars/s on a re-run with other workstreams' jobs
+running), 76 s in the real-model test under load; `da_festuge.txt` (3 sentences)
 da→en 2.8 s incl. warm-up; model load from cache 0.3–0.4 s. Extrapolated, a 90-minute meeting
 (~80 000 chars) is ~10 min on this CPU — a background action, hence the sentence-count progress and
-Cancel. Sample da→en: "At the Aarhus Festival Secretariat we have been running very strong in the
+Cancel. **Headless Chrome (WASM, `--disable-gpu`, cross-origin isolated, 12 threads):** a real
+end-to-end run — Whisper Tiny transcript of `da_festuge.m4a`, "Translate transcript…" → download
+`Xenova/opus-mt-en-da` → "Translating… 0 of 1 sentence" → "Translation (Danish)" card with four
+exports — took 4–8 s from click to result for that one-sentence transcript (download included);
+no browser number for a long transcript was taken. Sample da→en: "At the Aarhus Festival Secretariat we have been running very strong in the
 last few months."
 **Errors** go through `classifyError` with the new stage `"translate"` (out-of-memory suggests closing
 tabs instead of a smaller Whisper model; a failed download is a retryable network error). Cancel

docs/plans/001-4-translate.md

@@ -127,7 +127,7 @@ unreachable and the model is not cached; run under the lock), `scripts/bench-tra
 - Result rendered by `TranscriptView` with title "Translation (English)" and exports named
   `<file>.en.txt` / `.en.srt`.
 - State resets whenever `result` changes; Cancel terminates the translate worker.
-- [ ] impeccable polish pass; screenshots light/dark × desktop/mobile; real headless-Chrome run of a
+- [x] impeccable polish pass; screenshots light/dark × desktop/mobile; real headless-Chrome run of a
   translation (WASM) if feasible.
 - [x] Commit.
 

src/index.css

@@ -773,7 +773,8 @@ body {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 1rem;
+  flex-wrap: wrap;
+  gap: 0.5rem 1rem;
 }
 
 .transcript-header h2 {
@@ -1004,6 +1005,7 @@ code {
 .transcript-actions {
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
   gap: 0.5rem;
 }
 
@@ -1062,7 +1064,7 @@ code {
   font-size: 0.85rem;
   cursor: pointer;
   white-space: nowrap;
-  transition: border-color 0.15s, color 0.15s;
+  transition: border-color 0.15s, color 0.15s, background-color 0.15s;
 }
 
 /* The panel's one action reads as the action: accent outline, like a