fix(cmux-next diff): jump-to-file stays clear of the toolbar pill beside the files sidebar
Layout pass, running list (lane: layout-pass; full list in cmuxterm-hq knowledge/layout-pass.md)
- Merged: #22785 Settings, #22825 Markdown toolbar, #22839 Chief latency bars, #22847 Harnesses, #22862 gallery Settings cascade, #22872 code editor find pill, #22880 gallery model picker, #22904 Passwords header, #22917 Agent Activity split
- This PR: the diff toolbar beside the files sidebar
- Next: Stats week heatmap, icon-picker search placeholder at 440
What
From 521px the diff viewer shows its files sidebar, and the toolbar's source controls share the bar with the toolbar pill. Between 521px and about 560px the jump-to-file chevron slid under the pill.
#base-picker kept a 150px min-width, which is wider than its own "HEAD → main ⌄" content (140px). It never shrank, so the source cell overflowed.
- A new
toolbar-leftcontainer query (≤330px, the source cell beside the files sidebar) hides the head side and its arrow as a whole, instead of letting "HEAD" clip to "HE…", and lowers the picker's floor tocalc(6ch + 50px): the ref's 6ch plus the chevron in the chip's padding. The drop order is now ahead/behind, then the head side, then the reason. - Wider cells keep the 150px floor, so a long base ref still ellipsizes inside the chip and jump-to-file stays in its cell. Review caught both earlier tries:
min-width: 0let the label spill out of the chip at 400 to 480px, andmin-width: autostopped long refs ellipsizing and pushed jump-to-file out of its cell.
Wider toolbars are unchanged.
Test
CMUX_BROWSER_TESTS=1 bun test test/diff-toolbar-narrow.test.ts (real Chromium, the existing harness with a new ?picker variant that shows the base picker). At 521, 540, 560 and 600px beside the files sidebar, it checks that:
- the jump-to-file chevron stays inside its cell and left of the pill
- the base picker's label stays inside its button
Results:
- New cases at 400 and 460px (no files sidebar) check that the picker's label stays inside its chip and that jump-to-file never draws over it.
- Base (red commit): 521 and 540 fail, with the chevron's right edge at 316.8 against cells of 282.5 and 301.5. With
min-width: 0, the 400, 460 and 521 cases fail. - New cases with a long base ref (
origin/feature/some-very-long-branch-name) at 560, 600 and 900px check that the ref ellipsizes and jump-to-file stays in its cell;min-width: autofails them. - Head: 12 pass, including the file's existing tests.
Screenshots
Gallery pages.diff / many-files (toolbar strip). "Before" is the base gallery; "after" is the same page with this PR's rules injected.
| Before | After | |
|---|---|---|
| 560, dark |  |  |
| 560, light |  |  |
| 521, dark |  |  |
| 521, light |  |  |
Observed / Not run
- Observed: the test above, red then green.
prepush-gate.py: no new violations.oxlintis clean on the test and harness.tsc --noEmitreports nothing in the changed files. vp fmt --checkflagssrc/styles.cssfor formatting debt on base lines this PR doesn't touch (font list, data URLs, file-icon hues), so I left them.- Not run locally: the full
bun run checkand a gallery build, because heavy jobs moved off huge-blue.
Changelog
Fixed: beside the files sidebar, the diff viewer's jump-to-file button no longer slides under the toolbar.
Agent session: huge-blue
🤖 Generated with Claude Code