You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The header row in apps/ui/src/components/metagraphed/app-shell.tsx (lines 130-183) renders its controls in one non-wrapping flex row. Most controls already have mobile-specific treatment — NavMegaMenu is hidden lg:flex (nav-mega-menu.tsx:208), and ShortcutsPopover/ApiDrawerTrigger are hidden md:inline-flex (replaced by the hamburger MobileMegaMenu sheet below lg). But NavOmnibox (app-shell.tsx:142, rendered inside <div className="flex-1 flex justify-end">) has zero responsive hide/collapse classes — its own root (nav-omnibox.tsx:299) is only relative flex-1 max-w-xl lg:max-w-2xl xl:max-w-3xl min-w-0, which shrinks the box via flexbox but never hides or collapses it. Below md (768px), the surviving row is hamburger + Brand + NavOmnibox + NetworkSwitcher + SettingsPopover — 5 controls fighting for space in one line, with the omnibox squeezed to a barely-usable sliver on narrow phones (< 400px) instead of getting the same deliberate mobile treatment its neighbors already have.
Requirement
On narrow mobile viewports (below the existing md breakpoint already used by its sibling controls), NavOmnibox must not render as a full always-expanded text input competing for space in the non-wrapping header row. It should either collapse to a compact search-icon trigger that expands on tap, or be hidden from the header row (with search still reachable via the existing ⌘K//-bound CommandPalette, which NavOmnibox already delegates to via onOpenPalette).
Deliverable
File to change: apps/ui/src/components/metagraphed/nav-omnibox.tsx — specifically the root wrapper at line 299 (<div ref={wrapRef} className="relative flex-1 max-w-xl lg:max-w-2xl xl:max-w-3xl min-w-0">) and the <input> block at lines 300-333.
Possible knock-on edit in apps/ui/src/components/metagraphed/app-shell.tsx at line 141-143 (the <div className="flex-1 flex justify-end"> wrapper around <NavOmnibox onOpenPalette={...} />) only if the collapse needs a size/layout hook from the parent — verify whether NavOmnibox's own internal breakpoint classes are sufficient first.
Anchor for "current code that needs to change": the always-rendered <input> element (lines 308-322) and its surrounding pill (lines 301-333) — currently has no hidden/collapsed variant matching the hidden md:inline-flex pattern already used by ShortcutsPopover (shortcuts-popover.tsx:60) and ApiDrawerTrigger (api-drawer.tsx:41).
What "done" looks like concretely: below the chosen breakpoint (recommend md, matching the sibling controls), the full pill+input either (a) is replaced by a compact icon-only button that calls onOpenPalette() (reusing the existing CommandPalette already wired at app-shell.tsx:257 and already bound to ⌘K// at app-shell.tsx:94-112), or (b) is not rendered at all in the header, with the hamburger-menu / palette remaining the mobile search entry point. Either way, no new search UI or backend call is introduced — this only changes what renders in the header row at narrow widths.
No coordination needed with another issue for the mechanism itself; this issue is scoped to NavOmnibox specifically (per its title), not the header row's other four controls.
Acceptance criteria
apps/ui/src/components/metagraphed/nav-omnibox.tsx is the file (or one of the files) changed in the diff
Below the chosen breakpoint, the header row no longer shows the full expanded NavOmnibox text input fighting for space with the hamburger, Brand, NetworkSwitcher, and SettingsPopover
The collapsed/hidden state still gives narrow-viewport users a way to reach search — either a tappable icon trigger or reliance on the existing ⌘K//-bound CommandPalette
At lg and above, NavOmnibox renders exactly as it does today (no regression to the desktop omnibox: live suggestions, direct-nav detection for ss58/block/hash, recent searches, ⌘K hint)
No new API calls, routes, or backend changes are introduced — this is a header-layout-only change
Includes a before/after screenshot table (mobile viewport, e.g. 375px) per the repo's UI-PR requirement for any change touching visual output in apps/ui/
Non-goals
Don't touch the other four controls in the header row (hamburger, NetworkSwitcher, SettingsPopover, GitHub/Discord icons) — their existing responsive treatment is out of scope here.
Don't change CommandPalette itself (app-shell.tsx:257) or its ⌘K// keybinding logic (app-shell.tsx:94-112) — reuse it as-is if the collapsed trigger opens it.
Don't add a new search backend, new search UI pattern, or new route — this is strictly a responsive-collapse fix for the existing omnibox markup.
Size
Size: M — keep this PR small (aim for ≤10 files / ≤1000 LOC).
Context
The header row in
apps/ui/src/components/metagraphed/app-shell.tsx(lines 130-183) renders its controls in one non-wrapping flex row. Most controls already have mobile-specific treatment —NavMegaMenuishidden lg:flex(nav-mega-menu.tsx:208), andShortcutsPopover/ApiDrawerTriggerarehidden md:inline-flex(replaced by the hamburgerMobileMegaMenusheet belowlg). ButNavOmnibox(app-shell.tsx:142, rendered inside<div className="flex-1 flex justify-end">) has zero responsive hide/collapse classes — its own root (nav-omnibox.tsx:299) is onlyrelative flex-1 max-w-xl lg:max-w-2xl xl:max-w-3xl min-w-0, which shrinks the box via flexbox but never hides or collapses it. Belowmd(768px), the surviving row is hamburger + Brand + NavOmnibox +NetworkSwitcher+SettingsPopover— 5 controls fighting for space in one line, with the omnibox squeezed to a barely-usable sliver on narrow phones (< 400px) instead of getting the same deliberate mobile treatment its neighbors already have.Requirement
On narrow mobile viewports (below the existing
mdbreakpoint already used by its sibling controls),NavOmniboxmust not render as a full always-expanded text input competing for space in the non-wrapping header row. It should either collapse to a compact search-icon trigger that expands on tap, or be hidden from the header row (with search still reachable via the existing⌘K//-boundCommandPalette, whichNavOmniboxalready delegates to viaonOpenPalette).Deliverable
apps/ui/src/components/metagraphed/nav-omnibox.tsx— specifically the root wrapper at line 299 (<div ref={wrapRef} className="relative flex-1 max-w-xl lg:max-w-2xl xl:max-w-3xl min-w-0">) and the<input>block at lines 300-333.apps/ui/src/components/metagraphed/app-shell.tsxat line 141-143 (the<div className="flex-1 flex justify-end">wrapper around<NavOmnibox onOpenPalette={...} />) only if the collapse needs a size/layout hook from the parent — verify whetherNavOmnibox's own internal breakpoint classes are sufficient first.<input>element (lines 308-322) and its surrounding pill (lines 301-333) — currently has nohidden/collapsed variant matching thehidden md:inline-flexpattern already used byShortcutsPopover(shortcuts-popover.tsx:60) andApiDrawerTrigger(api-drawer.tsx:41).md, matching the sibling controls), the full pill+input either (a) is replaced by a compact icon-only button that callsonOpenPalette()(reusing the existingCommandPalettealready wired atapp-shell.tsx:257and already bound to⌘K//atapp-shell.tsx:94-112), or (b) is not rendered at all in the header, with the hamburger-menu / palette remaining the mobile search entry point. Either way, no new search UI or backend call is introduced — this only changes what renders in the header row at narrow widths.NavOmniboxspecifically (per its title), not the header row's other four controls.Acceptance criteria
apps/ui/src/components/metagraphed/nav-omnibox.tsxis the file (or one of the files) changed in the diffNavOmniboxtext input fighting for space with the hamburger, Brand,NetworkSwitcher, andSettingsPopover⌘K//-boundCommandPalettelgand above,NavOmniboxrenders exactly as it does today (no regression to the desktop omnibox: live suggestions, direct-nav detection for ss58/block/hash, recent searches,⌘Khint)apps/ui/Non-goals
NetworkSwitcher,SettingsPopover, GitHub/Discord icons) — their existing responsive treatment is out of scope here.CommandPaletteitself (app-shell.tsx:257) or its⌘K//keybinding logic (app-shell.tsx:94-112) — reuse it as-is if the collapsed trigger opens it.Size
Size: M — keep this PR small (aim for ≤10 files / ≤1000 LOC).
Part of #2542.