cmux-next: suggestion lists float over the content (cx-6k6cg)

Merged
TE
25d ago
+311-140

Summary

Suggestion lists in cmux-next float over the content: opening one, or narrowing it, never moves the content around it (cx-6k6cg, part 1 of 2).

Audit. Every list was checked.

  • Already floating, and left unchanged:
    • the composer slash menu and @-mentions (absolute above the composer);
    • Cmd-P file search;
    • the palette, including its folder picker and tab search (native panel);
    • the browser omnibox (overlay host);
    • the diff jump-to-file and base pickers;
    • the Settings theme and font lists.
  • Not suggestion lists at all:
    • Settings search, a filter that replaces the section content;
    • the find bars, which have no history or suggestions;
    • sidebar and tab rename, which are plain fields.
  • The New Tab omnibar list in the new templates (newtab/*) belongs to #19750. Two lists still moved things, and this PR fixes them:
    • Classic New Tab template. NewTabPage.tsx's suggestions (.acpmux-omni) were an in-flow sibling after the form, so typing pushed the actions and the rest of the page down. They are now absolute under the field (.acpmux-newtab-anchor), on the solid popup surface, on the dropdown layer. Because they float over the page, they show only while the field has the keyboard and something is typed, and they close on blur. The empty-query recent rows (recent tabs, workspaces and sessions) no longer show at rest, where they would cover "All sessions"; those stay reachable through All sessions and by typing.
    • Inline filter lists in popovers (ui/Combobox inline: the composer folder picker, the Settings theme picker, the Markdown link popover, Add Project). Filtering shrank the list, which resized the popover. A popover that opens above its anchor kept its bottom edge, so its search field moved under the caret on every keystroke. An inline list can now keep its tallest height while it is open (keepHeight, re-measured when the window resizes), so the empty space stays at the bottom. Only the folder picker opts in. The theme picker and link popover show an empty-state message, or nothing, after the list, so they keep shrinking.

Keyboard navigation is unchanged. The field keeps focus and drives the list through aria-activedescendant, and arrows, Enter, Tab and Escape behave as before.

Part 2, a separate PR, makes menus, dropdowns and autocomplete lists reach past the window edge (flip first, escape last) through a native child panel. Settings pop-ups stay in the window.

Testing

Boundary test: webviews/test/suggestion-lists-float.test.ts, on the browser lane (Chromium, real components on the gallery stage). Each case records the boxes of the content around a list, opens or narrows the list, and compares them to the pixel:

  • Classic New Tab: at rest no list shows and "All sessions" takes a click. Typing opens the list while the field box and the actions under it stay put, ArrowDown moves the selection, and blurring the field closes the list so "All sessions" takes a click again.
  • Composer slash menu: the transcript and the composer box stay put.
  • Folder picker: typing a filter that removes rows leaves the search field and the composer box in place.

Results:

  • Red on base (361328e0d942, earlier test revision): the classic New Tab and folder picker cases fail; with the final test the classic case still fails on base, because the list shows at rest there; the slash menu case passes on base because it already floats.
  • Green on this head: 3/3.

Also green locally:

  • bun run check;
  • ui-rules;
  • the browser suites composer-location-side, composer-mention, popup-surface, ui-a11y, composer-menu-width and settings-scroll;
  • the new-tab-* and project-chooser-empty tests.

Changelog

  • Fixed: suggestion lists no longer push the page down: the classic New Tab suggestions float under the field while you type, and filtering the folder picker keeps its search field in place.

🤖 Generated with Claude Code