cmux NEXT project picker: one icon column, one text inset, even rows, no repeated path
Leo, on the composer's Choose project picker: ":( alignemnt"
The project picker's rows now share one icon column and one text inset. The gap between the actions and the folders is a hairline. A folder whose title is its own path shows the path once. No row or option is removed.
What was wrong (measured in the gallery, CSS px from the menu's left edge):
| Row | Icon box before | Text before | Icon box after | Text after |
|---|---|---|---|---|
| Do not work in a project | 11, 14 wide (a 14px glyph with 3px margins) | 36 | 8, 16 wide | 32 |
| + New project | 8, 14 wide | 30 | 8, 16 wide | 32 |
| /Users/sample (folder) | 8, 20 wide, on a filled tile | 36 | 8, 16 wide, no tile | 32 |
| Gap between New project and the first folder | 8px blank, no separator | 4px, a hairline, 4px | ||
| /Users/sample subtitle | "/Users/sample" again | none |
- One icon column. Every row puts its mark in one 16px box with no tile: Do not work in a project, + New project, a typed path (
.acpmux-project-lead) and each project's badge. The environment, model and mode pickers don't use tiles either. Inside the menu the badge drops its tile; the composer pill's badge keeps it. - One text inset. New project's label uses the shared
.acpmux-menu-textand.acpmux-menu-label, so every title starts at 32. - Even rows. The pinned actions and the folder list are two real sections, so they're split by a hairline with the menu's 4px on each side. The hairline only appears when a folder follows.
- No repeated path. A folder whose label equals its path (for example a home folder) shows no subtitle.
Spec: leo-workspace design/grid.md 5.3 (menus and pickers). The rule "every row in a picker shares one icon column and one text inset; row rhythm is even; a subtitle that equals its title is not shown" is being added there in a separate leo-workspace change.
Stills (2x, gallery agent-pane.project-chooser / open-path-titled, synthetic paths)
| Light | Dark | |
|---|---|---|
Before (e55ecba, test commit only, same as the base) |  |  |
| After |  |  |
Viewed after image: the light and dark after stills above. Do not work in a project, New project, /Users/sample and atlas-web have their glyphs on one column and their titles on one line. A hairline separates New project from the folders. /Users/sample appears once, with its check at the right. atlas-web keeps its path subtitle.
Visual verdict (claude-sr2-coord): SHIP at 95b681979e7d69d430058e81cf2e2caeb1101975. All four rows share one 16px icon column and one text inset, the hairline separates the actions from the folders, and the duplicate subtitle is gone; light and dark are clean.
Visual verdict (ux-owner, Claude Opus 5.5): SHIP at 95b681979e7d69d430058e81cf2e2caeb1101975.
Follow-up nit (not in this PR): the search field's underline (x≈18–602) is wider than the folder hairline (x≈26–594); match the divider insets in the menu-grid follow-up.
The check, reusable
webviews/test/picker-row-geometry.test.ts (helper webviews/test/support/pickerRowGeometry.ts) opens each picker in the gallery, in light and dark, and checks within 0.5px:
- every row's icon box has the same left and width;
- every title's first glyph starts on the same x;
- the gaps inside a section are equal (so rows of the same height have the same pitch);
- a wider gap at a section boundary has a separator;
- no subtitle repeats its title.
A picker joins by listing its selectors (menu, row, icon, title, optional subtitle, section, sectionStart and open).
Audit of the sibling pickers with it: the environment picker (This Mac / gpu-box / Cloud machine / New Cloud Machine… / Open Cloud… / SSH… / Connect Phone… / Add Machine…), the model picker (quick menu) and the mode picker all pass at fail level, so they're held to the rule too. Nothing needed fixing in them. Their columns differ from each other (environment: icon 12, text 34; project and mode: icon 8, text 32). Moving every menu onto the shared AppKit columns is #27616's job; this PR doesn't touch it.
Red, then green: cd webviews && bun test test/picker-row-geometry.test.ts
- At
e55ecba9730634969accdddff7885ea0cb9a0911(test only): the project picker cases fail. The two variants in two themes, 4 failures (text 30 vs 36, icon 11/14 vs 8/14 vs 8/20, an 8px blank gap, the repeated subtitle). The two mode-picker failures at that commit came from a test bug that a later test commit fixed. - At
95b681979e7d69d430058e81cf2e2caeb1101975: 15 pass, 0 fail. This includesproject-menu-geometry.test.tsandcomposer-search-row-geometry.test.ts.
Observed / Not run
- Observed: the test above, red then green, on the org's Linux runners at those heads.
bun run check: type check clean and no lint errors. Its remaining reds are base debt inwebviews/src/pages/settings/(format in 9 files, design-token and z-index entries inpages/settings/styles.css); this PR touches none of them. Stills captured in Chromium from the gallery. - Not run: WebKit stills, and a native app build or capture (this is a webview-only change).
Prior art: #27616 (draft, held: a shared AppKit menu grid that will move this menu's columns onto --cmux-menu-*) and #27539 (grid tokens and the grid-lines check). This PR is the narrow fix for this picker. It doesn't edit the lines #27616 changes, and its row rule holds whichever columns #27616 settles on.
Risk: low/normal. Webview CSS and markup for one menu, plus a test.
Changelog
- Fixed: The Choose project picker's rows line up on one icon and text column, and a folder named by its path no longer shows that path twice.
Agent session: agent session
🤖 Generated with Claude Code