From c0528af08286a228b73ee46fa3dcdfd33b37616d Mon Sep 17 00:00:00 2001 From: Lucas Winther Date: Fri, 30 Oct 2026 00:19:04 +0100 Subject: [PATCH] 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 --- DESIGN.md | 2 ++ docs/Decisions.md | 9 +++++++-- docs/plans/001-4-translate.md | 2 +- src/index.css | 6 ++++-- 4 files changed, 14 insertions(+), 5 deletions(-) diff --git a/DESIGN.md b/DESIGN.md index 357d6d2..069ed80 100644 --- a/DESIGN.md +++ b/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 ``, muted 0.85rem hints, outlined 8px buttons. Inside the diff --git a/docs/Decisions.md b/docs/Decisions.md index 44f1207..9786b20 100644 --- a/docs/Decisions.md +++ b/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 diff --git a/docs/plans/001-4-translate.md b/docs/plans/001-4-translate.md index b6554b2..1f7e65f 100644 --- a/docs/plans/001-4-translate.md +++ b/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 `.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. diff --git a/src/index.css b/src/index.css index 9f444d1..bf8f2c2 100644 --- a/src/index.css +++ b/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