Header search improvements

[a-effort]

Summary
Style, interaction, and accessibility update to the header search. Also fixes a responsive bug that hid the search entirely on smaller screens.

Changes

• Collapsed state icon plus a filled shortcut chip instead of a 62px input pill with an outlined badge floated on top of it. The input collapses to w-0.
• The ⌘ symbol is lucide's Command glyph rather than a text character; Windows/Linux still get a text Ctrl. getQuickNavShortcutLabel becameisAppleShortcutPlatform and returns a boolean instead of a prebuilt string.
• Expanded field: 300px at md, 400px at lg (md:w-75 lg:w-100)
• Results dropdown matches at w-75 lg:w-100, up from a fixed w-80.
• The native ::-webkit-search-cancel-button (system-accent blue, unthemeable) is suppressed via appearance-none, replaced by a lucide X button that clears the query and returns focus.
• The dropdown's "Searching…" state drops the anvil Loading spinner and now renders identically to the other status messages.
• The dropdown no longer opens over the input's expand animation. Both it and aria-expanded derive from a single isResultsOpen that requires a query.
• One role="status" live region now stays mounted for the component's lifetime and mirrors dropdown state, including a new result-count announcement. Previously results arrived silently after "Searching…".
• The search was hidden md:block while the sidebar collapses at 768px, so it disappeared exactly when the nav collapsed. Now visible at all widths, with the shortcut chip hidden below md and a 50vw cap on the expanded field.
• GitHub and docs links hide below sm, matching the version label, to give the search room on narrow viewports.
• Added common.search.clear and common.search.resultCount to en-US, es-ES, and pt-BR.

search.mp4

Test plan

• Collapsed search matches the Figma frame in light and dark themes
• ⌘K / Ctrl+K focuses and expands; correct modifier renders per platform
• Dropdown stays closed when clicking the magnifier, opens on first keystroke
• Clear button appears with a query, clears it, and returns focus
• Expanded field and dropdown are 300px / 400px at md / lg
• Resize under 768px: search remains visible, chip hidden, no overflow
• Resize under 640px: GitHub and docs links hidden
• Screen reader announces "Searching…", result counts, and empty/error states
• npm run build, tsc --noEmit, and the layout suite (55 tests) pass

Known follow-ups

• The results dropdown has no max height; a broad query can render up to 64 rows. Adding scroll needs scrollIntoView for the aria-activedescendant highlight.
• ListSearch (catalog, Teams, Servers, Users) still shows the native blue "clear" button: same one-line fix, best applied once in ListSearch or Input.
• The app never declares CSS color-scheme, so native chrome (scrollbars, autofill) still renders light-scheme in dark mode.
• "no results" issue shown in the recoding attached is tracked here: Header search doesn't surface MCP server catalog results #20 and Unified search doesn't include the MCP server catalog IBM/mcp-context-forge#6212

[gcgoncalves]

Excelent! 👏