fix(cmux-next passwords): the header and saved logins fit a narrow pane
Merged
TE
15d ago+132-4
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 editor find pill, #22880 gallery model picker
- Open: #22897 diff toolbar beside the files sidebar
- This PR: the Passwords page in a narrow pane
- Next: agent-activity split at 480, stats week heatmap
What
At 360px, the gallery's narrow width and a standalone pane:
- Header: the title shrank to nothing and "Import from Browser" ran off the right edge. The title row now wraps, with
.pw-titleset toflex: 1 0 auto. The title keeps its line and the actions wrap under it. - Logins: usernames squeezed to "N…" and "s" beside their badges, last-used and four actions. A row now wraps, and the username takes
flex: 1 1 8em. The badges, last-used and actions go under the name when they don't fit, and the actions stay right-aligned. - Control heights: search, profile and sort selects, and Import/Export buttons were 25 to 33px tall in one row, at every width. They now share 28px.
At 900px nothing wraps. The only visible change there is the equal control heights.
Test
CMUX_BROWSER_TESTS=1 bun test test/passwords-narrow.test.ts (real Chromium, the page's own ?mock dev entry).
- At 360px it checks that the title shows whole, the header's actions stay on screen, every username keeps 96px (or its full width), and the search row's controls share a height.
- At 900px it checks that the header's title row is one line and every login is one line.
Results:
- Base (red commit): 360 fails with the title at 0px. 900 fails because the search row has two heights.
- Head: 2 pass.
Screenshots
Gallery pages.passwords / lists. "Before" is the base gallery; "after" is the same page with this PR's styles.css applied.
| Before | After | |
|---|---|---|
| 360, dark |  |  |
| 360, light |  |  |
| 900, dark |  |  |
| 900, light |  |  |
Observed / Not run
- Observed: the test above, red then green.
prepush-gate.py: no new violations.vp fmt --checkandoxlintare clean on both files. - Not run locally:
bun run checkand a gallery build, because heavy jobs moved off huge-blue. - Left as is: the native profile select sizes to its longest option (about 230px).
Changelog
Fixed: in a narrow pane, the Passwords page keeps its title, actions and usernames readable.
Agent session: huge-blue
🤖 Generated with Claude Code