fix(oc-docs): center collapsed search overlay within the docs area

[vasharma05-bruno]

What & why

Below desktop, the endpoint search collapses to an icon that opens an overlay panel. Its positioning was gated on viewport @media queries — but the topbar/sidebar responsive mode is derived from the docs-area width (so the inline playground can shrink the docs chrome while the window stays wide).

When the inline playground shrinks the docs column under 1024px on a wide screen, the JS switches to the collapsed icon layout, but none of the viewport media queries fire. The overlay then fell back to the desktop rule and centered on the narrow, left-aligned field — hanging off the left edge of the screen.

Fix

• Drive the collapsed overlay off the shell's docs-area-derived mode via a collapsed prop on SearchBar → a data-collapsed attribute, instead of viewport media queries.
• When collapsed, the field wrapper spans the full reveal row so the position: absolute panel centers within the docs area. .appshell-body is overflow: hidden + a container, so the panel stays inside the docs column and never leaks into the playground pane. position: fixed is dropped entirely.
• AppShell passes collapsed={!isDesktop}, so SearchBar always agrees with the container the Topbar renders (both derive from the same docs-area mode).
• Consistency cleanups in the search + topbar styles: z-index via the --z-popover token (the overlay no longer risks rendering under other layers), the results scroll region derived from the panel cap so the two can't desync, and a --topbar-height token.

Screenshots

Collapsed search opened while the inline playground shrinks the docs area on a wide window.

Before — panel hangs off the left edge (placeholder/chips clipped):

After — panel centers within the docs area:

Testing

• npm run lint — clean on the touched files
• npm run test:run — 902/902 unit tests pass
• npm run test:e2e -- search/search.spec.ts — 18/18 pass (incl. tablet/mobile viewport cases)
• Manually verified the split-view scenario (wide window + inline playground, docs area 900px): the panel centers with a 0px offset from the docs-area center (was −115px, hanging off-screen left).

🤖 Generated with Claude Code