fix(webapp): keep the provenance line on mobile, unclipped in History (BEA-70)

[ssowonny]

TL;DR

• On a phone, the who/when/how-hot line was just gone from the file view — the one line the product is differentiated by, missing on the surface people catch up from.
• History's run header clipped to claude-… and Alice <ali…, which is exactly the two fields that row exists to carry.
• CSS-only, entirely inside the existing @media (max-width: 900px) block. Desktop doesn't move.
• The trick is order: 1: #meta sits before the action buttons in the DOM, so a bare flex-wrap would have dragged Search/Share/⋯ down to row 2 with it.
• Known gap: the plan had .hrun-time staying on row 1 for free. It doesn't — .hrun-meta needed order: 1 too, or the time fell to a third row. Deviation noted below.

Before / after at 390px

	before	after
file view
History

Both surfaces computed the provenance correctly all along and then threw it away in layout.

What changed

Two rules were doing the damage, both inside the ≤900px block:

rule	was	now
#meta	display: none	own full-width row, left-aligned, wrapping
#topbar	height: 52px (would clip row 2)	height: auto; min-height: 52px
.hrun-note	max-width: 46% + nowrap + ellipsis	uncapped, wraps
.hrun-meta	nowrap + ellipsis	own line under the note, wraps

Three things worth a reviewer's eye:

• order: 1 on #meta is load-bearing. The topbar's children are menu / crumb / meta / actions. Wrapping without order puts meta on row 2 and drags the actions with it, because they follow meta in the DOM. order: 1 sorts meta last regardless of DOM position, so the actions stay pinned top-right. #crumb { flex: 1 } is untouched and stays the spacer.
• #meta:empty is not optional. meta is "" on every non-file route (Browser.tsx holds it as state, FileView.tsx clears it on unmount), so without the guard every folder listing, dashboard and History page on a phone would gain an 8px blank strip under the crumb — a regression on far more routes than the one being fixed.
• Nothing is sticky, and #topbar is a plain flex item inside #main, so growing it pushes content down rather than overlapping it. The "content isn't overlapped" criterion holds by construction; the test asserts it anyway.

Deviation from the reviewed plan

The plan said .hrun-time "keeps margin-left: auto and stays on row 1" once .hrun-meta takes flex: 1 1 100%. It doesn't — the time follows meta in the DOM, so a full-basis meta pushes the time onto a third row. .hrun-meta got order: 1 as well, which sorts it after the time: row 1 is toggle + note + time, row 2 is the meta. Same visual result the plan described, one extra declaration.

Everything else is as planned.

What was run

• go build ./..., go vet ./..., go test ./... — all packages pass.
• npm run e2e — 148 passed, 1 skipped (the pre-existing skip).
• New test provenance survives to a phone on the file view and in History in e2e/layout.spec.ts. It reads the desktop values at 1200px first and compares the 390px values against them rather than hard-coding strings — the seeded hub's read counts drift, so a literal would flake. It also pins actions-flush-right, the 44px tap target, no clipping, no horizontal page scroll, and a folder route's topbar still being exactly 52px.
• Verified the test fails without the fix: reverted style.css, rebuilt, and it fails on #meta never becoming visible at 390px.
• Assets rebuilt with npm run build and committed to internal/webapp/static.

Watch-outs

• internal/webapp/static conflicts with any other frontend PR in flight (BEA-72, BEA-74, BEA-76 all rebuild it). Resolve by re-running npm run build on the merged src, never by picking a side.
• BEA-74 adds an overflow-x rule to the same media block. Whichever lands second rebases with a one-hunk conflict.
• The one thing I only checked against the seeded note: .hrun-note is now uncapped on mobile, so a genuinely long agent session note wraps to several lines and grows the card header. Fine at the seeded claude-code session 8f21e4; unknown at, say, a 200-character note.

No architecture diagram changes — CSS only, no types or relationships moved.

Build session

cd $(git worktree list | grep bea-70 | awk '{print $1}') && claude --resume c841cf90-6a01-4494-9ecf-6c9557b67ebf

(only works on the machine that ran the build)