[Michael McQuade (giraffesyo)]

Apps now put a list's controls (a ListToolbar with view, filter and search) in PageHeader's actions, so the count can sit under the rows. On a phone, opening that search painted a fixed 288px field over the sidebar toggle, the breadcrumbs and the other controls.

What changes

• The open search takes the whole bar when it doesn't fit. The bar measures whether the search field, opened in place, would fit beside the trail even with every PageHeaderAction folded into "…". It uses the same measurement as the actions' fit, not a breakpoint. If the field wouldn't fit, the open search fills the bar from its start to its end. The trail, title actions and other controls stay laid out underneath, invisible and inert, so closing restores the bar exactly. On a wide bar the field still opens in place.
• Focus. Opening (button, / or Mod+F) moves focus into the field, which keeps its accessible name. Closing with Escape or × returns focus to the search button. This also applies to a search opened in place, which used to drop focus to the page.
• Nothing lost. Escape keeps the search terms, as before. Where the search takes the bar, a closed search with terms shows as its button, with a dot and the name "Search …, on" (new list.searchActive string). Elsewhere the terms keep the field open, as before.
• Closed, the actions fit. PageHeaderActions and "+ Add" fold into "…" before the controls reach the trail, and the trail folds to the current page first. A ListToolbar's icons are never folded.
• Apps need no changes.

Screenshots

UI/List/Page › Controls in the header (new story): breadcrumbs, a ListToolbar, "Edit allocations" and "+ Add" in actions.

Phone (390px), search open with a query

	Before	After
Light
Dark

Phone (390px), search closed (unchanged)

	Before	After
Light
Dark

Desktop, the field opens in place (unchanged)

	Search closed	Search open
Light, before
Light, after
Dark, before
Dark, after

Tests

src/list/headerSearch.dom.test.tsx, with a measured bar:

• On a narrow bar the search takes the bar, with the trail and actions inert and hidden.
• Escape restores the bar's markup exactly and focuses the search button. × does the same.
• A kept term marks the closed button.
• On a wide bar the field opens in place.

[github-actions]

Dependency graph benchmark

Medians of 3 runs in headless Chrome on a shared runner; lower is better. Base and head run in turn on the same machine. ⚠️ marks a result more than 25% slower than the base, beyond its usual noise.

thousand

	Base	Head	Change
Mount	158 ms	166 ms	+5%
Hover, median frame	17 ms	17 ms	+0%
Hover, p90 frame	17 ms	17 ms	+0%
Hover, slowest frame	183 ms	200 ms	+9%
Wheel zoom, median frame	17 ms	17 ms	+0%
Wheel zoom, p90 frame	17 ms	17 ms	+0%
Page elements	8,058	8,058	+0%

three-thousand

	Base	Head	Change
Mount	386 ms	377 ms	−2%
Hover, median frame	133 ms	133 ms	+0%
Hover, p90 frame	500 ms	495 ms	−1%
Hover, slowest frame	567 ms	600 ms	+6%
Wheel zoom, median frame	17 ms	17 ms	+0%
Wheel zoom, p90 frame	17 ms	17 ms	+1%
Page elements	24,023	24,023	+0%

nested

	Base	Head	Change
Mount	11 ms	11 ms	+2%
Hover, median frame	17 ms	17 ms	+0%
Hover, p90 frame	17 ms	17 ms	+0%
Hover, slowest frame	17 ms	17 ms	+0%
Wheel zoom, median frame	17 ms	17 ms	+0%
Wheel zoom, p90 frame	17 ms	17 ms	+0%
Page elements	140	140	+0%