Let the mobile search dialog fill the screen, and put Cancel by the field

[fstubner]

The mobile search item: the clear control in the wrong place, Cancel beside the results, and the results not reaching the bottom of the screen. All three measured at 500×708 with results on screen.

The results stopped 151px short

Two fixed reservations, both for chrome that does not exist at this size:

#starlight__search       max-height: calc(100vh - 9.5rem)   → 152px reserved
.pagefind-ui__drawer     max-height: calc(100vh - 15rem)    → 240px reserved

The dialog is inset 9px and runs nearly full height; the drawer's bottom landed at 557 in a 708 viewport.

Swapping those for 100% was not the fix — no ancestor has a definite height for a percentage to resolve against, so the drawer took its content height and pushed 1253px past the viewport, scrolling the page instead of itself.

The chain was the actual problem. #starlight__search was already a flex column, but the drawer is two levels below it:

#starlight__search      flex column, h=646
  .pagefind-ui          display:block, min-height:auto, h=1936   ← will not shrink
    .pagefind-ui__form  display:block, flex 0 0 auto,   h=1936   ← nor this
      .drawer           h=1872

Both middles are flex columns with min-height: 0 now, and the form moved from flex: 0 0 auto — correct when it held only the input — to 1 1 auto, since it holds the drawer too.

After: drawer 89→671, 37px of frame below it, scrolling inside itself.

Cancel sat level with the middle of the results

Starlight lays the frame out as "search close" / "drawer drawer" and files 23, 24 and 28 each pinned the button to row 1 with align-self: center. That row holds the whole Pagefind UI, not just the input, so it is ~590px tall — centring put Cancel at y=287, halfway down the results list.

start in all three. Now 43→87, beside the input at 25→73.

The clear control floated 83px short of the field's edge

Pinned to the trailing edge, 8px in.

About align-content: start

That declaration on the frame is what stopped the rows growing at all. It had been added with no stated reason. The empty-state height it appeared to be guarding is set directly by the min-height rules in 06, 23 and 28 — and I checked both states after changing it:

state	drawer
no query	0×0, hidden — dialog is just the field
no matches	89→452, sized to its message, no scroll
results	89→671, fills and scrolls internally

It stays compact when it has little to show.

Desktop unaffected

Two of these changes are not width-scoped, so I measured 1440×900: drawer 145→677 in a 748 viewport, scrolling internally — same behaviour as before.

One thing I did not fix

Cancel's box sits 18px lower than centring it against the input would put it. Its own margins compute to 0 and align-self computes to start, so the offset comes from somewhere I did not chase down. It is beside the field rather than beside the results, which was the reported fault.

Verification

astro check 0 errors · a11y 0 violations in both themes · CSS shadowing budget 42 → 25 (the edits added one, a prune removed 18) · all three fixes re-measured after the prune.

[github-actions]

Site preview: https://pr-272.netscli-site-preview.pages.dev

Built from 495fcba with NETSCLI_PREVIEW=1 — noindex, and analytics disabled so it does not report into netscli.com's numbers.

Production is unaffected: netscli.com is served from GitHub Pages via pages.yml, which is manual-only.