Skip to content

Hide or collapse the NavOmnibox search input on narrow mobile viewports #3454

Description

@JSONbored

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 — 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).

Part of #2542.

Metadata

Metadata

Assignees

No one assigned

    Labels

    gittensor:featureGittensor-scored feature linked to a feature issue — scores a 0.25x multiplier.

    Projects

    Status
    In progress

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions