cmux NEXT composer: text one gap after +, one left column, and +/mic/Send centered with equal insets
Leo, 2026-10-31: "composer still looks like shit with the + spacing indent to the text"
Leo, 2026-10-31: "why is our shit not vertically centered like claude's is??? applies to the send and mic buttons"
What changes
One fix for the shared composer in every layout (chat, Home / new chat, Quick Composer, New Tab), in both looks:
- The + to text gap. The text (placeholder, caret, typed draft, shell glyph) now starts one
--acpmux-composer-lead-gap(8 px) after the + button.- Chat: the gap was a local 7 px.
- New Tab: the field kept a blank 20 px glyph column after + even with no glyph showing, so the text started 28 px after +. Only a template with a prompt glyph (the Console's
>) keeps that column now. Shell mode's!stands in the gap, so entering it moves no text.
- One left column. The rows around the box put their leading glyph's center on the + glyph's center: New Tab's project and machine strip over the box, the quiet row's permission mode under it, and New Tab's suggestion rows.
- Centered controls with equal insets. +, the mic and Send are one 28 px control (New Tab's mic was 24). Each stands
--acpmux-composer-insetoff every box edge it meets.- Chat: 8 px. The prompt's padding is derived, (28 + 2 x 8 - line) / 2, so a one-line box is 44 px.
- New Tab: the inset is derived from its font-scaled row, 11.4 px at 14 px text.
- Optical centering moves the text, not the controls: the prompt's line box drops
--acpmux-text-drop(1 px at 14 px, never more than its padding), so the glyphs center on the controls. Before, a 1 px lift put the chat's controls 7.4 px under the top and 9.4 px over the bottom.
- Codex's look. + now stands 12 px off the box's left, as Send stands off its right (it was 6 px).
- New Tab's suggestions. The popover takes the + menu's denser glass (86% tint, as in #28798, and the menus' blur).
- A very narrow chat pane keeps + at 28 px, so its glyph stays on the quiet row's column.
The tokens live on the composer's root (.acpmux-composer, .nt-composer), in composerLocation.css and newtab/screen.css. This PR doesn't touch the + menu popover (#28798) or the bottom stack (#28587). It removes or reorders no control.
Measurements (gallery, Chromium, 760 px pane, light; base 8a274c26279 → head)
| Layout | + to text | + left / top / bottom | last control right / bottom | mic | box |
|---|---|---|---|---|---|
| chat (Claude) | 7 → 8 | 8 / 7.4 / 9.4 → 8 / 8 / 8 | 8 / 9.4 → 8 / 8 | 28 | 44.75 → 44 |
| Home (new chat) | 7 → 8 | 8 / 7.4 / 9.4 → 8 / 8 / 8 | 8 / 9.4 → 8 / 8 | 28 | 44.75 → 44 |
| New Tab | 28 → 8 | 18 / 11.4 / 11.4 → 11.4 each | 10 / 12 → 11.4 / 11.4 | 24 → 28 | 50.75 |
| chat (Codex) | n/a, + in the row | 6 → 12 | 12 | 28 | 121.75 |
| New Tab strip folder glyph center vs + glyph center | 22 vs 34.1 → equal | ||||
| New Tab suggestions glyph center vs + glyph center | 21 vs 34.1 → equal |
Test
webviews/test/composer-plus-geometry.test.ts (Chromium, gallery stage) covers 11 layouts: chat normal, narrow, typed and with an image; Home; New Tab default, with suggestions and narrow; and chat, Home and New Tab in Codex's look. Each layout is checked in light and dark, within 0.5 px, for:
- the + to text gap;
- the left column of the rows;
- one control size, each glyph at its button's center, every center on the first line's glyphs, and equal insets on every side;
- the suggestions popover's fill alpha (≥ 0.85) and blur.
It carries #28827's test commit, author kept; this PR supersedes #28827.
- Red on base: run 41168729937 at d3556316 (the test alone on base): 22 failures, the gaps and insets in the table.
- Green at head: run 41175086656 at 7c66f18 ran 16 files with 0 failures: the geometry test,
composer-alignment-centers(now expects 8, not 7),newtab-input-scale(counts the drop),new-tab-shell-layout,new-tab-empty-one-line,composer-claude-split,composer-row-rhythm,composer-shell-alignment,composer-foot-pill-inset,composer-alignment-measure,agent-pane-bottom-stack,new-tab-suggestions,new-tab-menu-over-suggestions,composer-edges,composer-side-insetandqueue-composer-alignment. Run 41177361082 at e1e48b4 (the 86% tint) re-ran the geometry test,new-tab-suggestions,new-tab-menu-over-suggestionsandglass-never-opaque: green.
Viewed after image: the gallery stills from the green runs (New Tab default and with suggestions, chat typed "helo", chat in Codex's look). The text sits one small gap after +, and +, the mic and Send sit on the text's line with equal room above and below.
Observed / Not run
- Observed: the runs above.
- Not run: a native app build. This is webview CSS only.
- Follow-up, not in this PR: on New Tab, the "Chats" header pill and "All Chats ›" under the suggestions popover look the same at 60%, 78% and 86% tint. They are probably stacked above the popover, or its backdrop isn't applied, rather than seen through the tint.
Spec: teamleaderleo/leo-workspace#1872 (design/composer.md rules 11-13 and a Controls section).
Changelog
Fixed: The composer's text starts one small gap after the + button, and +, the mic and Send sit centered on the text's line with equal room on every side, in chats, Home and New Tab.
Risk: normal. CSS insets on the composer, covered by the gallery geometry test.
Agent session: agent session
🤖 Generated with Claude Code