fix(web): responsive header + runs grid + turn pre wrapping (BEN-52)

[benSepanski]

Context

Dashboard, header, and turn <pre> blocks assumed a desktop viewport: a long run-id pushed the header wider than the screen, the 9-column runs grid forced page-level horizontal scroll on phones, and unbreakable strings in turns made <pre> blocks scroll instead of wrap. (Linear: BEN-52.)

TL;DR

Wrap the runs grid in an overflow-x-auto container with a 56rem min-width, let the header flex-wrap with smaller padding below sm, truncate the long run-id, and add break-words so turn pre-blocks wrap.

Summary

• App.tsx: header switches from fixed flex to flex flex-wrap, padding drops to px-4 py-3 sm:px-6 sm:py-4, nav links get a 32px tap target via px-2 py-2, and the run <id>… span uses min-w-0 max-w-full truncate so a long run-id can't overflow the row. Main padding mirrors the same responsive pattern.
• Dashboard.tsx: RunsTable is wrapped in <div className="-mx-4 overflow-x-auto sm:mx-0">; the inner <section> has min-w-[56rem] sm:min-w-0 so on a 375px viewport the grid scrolls horizontally inside the wrapper instead of expanding the page.
• RunDetail.tsx: the turn-content and rendered-prompt <pre> blocks add break-words, so long unbreakable tokens/URLs wrap inside the card rather than triggering a second horizontal scrollbar inside the run page.

Demo

n/a — automated cron run with no UI capture. pnpm all (151 tests + 5 evals) and pnpm build:web (231 kB JS / 23 kB CSS) are green. Manual QA at 375×812 is recommended on the four canonical journeys (empty / live / failed / past) before merge to confirm the page no longer scrolls horizontally.

Alternatives

• Switch the runs grid to a card-based layout below sm — rejected; the column set is only nine items and a horizontal scroll inside its own wrapper preserves the existing reading model and required no template duplication.
• Drop secondary columns (Scenario, Tokens, Cost) behind a "more" disclosure on narrow screens — deferred; would need product input on which columns are secondary, and the overflow wrapper already meets the acceptance criterion (no page-level horizontal scroll at 375px).
• Add a Playwright / jsdom regression test asserting body width at 375px — rejected as scope creep. vitest.config.ts only globs src/**/*.test.ts, and docs/FRONTEND.md already tracks "no component-test suite" as known tech debt; pulling in @testing-library/react + jsdom for one assertion would expand the test stack outside this ticket.

Test Plan

• pnpm all — typecheck + fmt:check + lint + test (151) + eval (5)
• pnpm build:web — web bundle builds (231 kB JS, 23 kB CSS)
• Manual: open #/, #/runs/<id>, #/search at 375×812 in DevTools and confirm no page-level horizontal scroll; the runs grid scrolls inside its wrapper; the long run-id in the header truncates instead of wrapping the nav row.

https://claude.ai/code/session_01P3fhTuAWNTQX1nUrLyDDHo

---

Generated by Claude Code