[R-01] Remove search field on mobile

[vmorps]

[R-01] Remove Search Field on Mobile

Severity: P0 — Production-blocking
Sprint: 1 (ship immediately)
Component: Navbar
Spec: design/specs/responsive-layout-fixes.md § R-01
Mockups: design/specs/responsive-layout-mocks.html — Item 1 (red circle)

---

Current Behavior

The docusaurus-lunr-search plugin renders a search input (Search Ctrl+K) in the navbar at all viewport widths. On mobile, this search field occupies significant horizontal space between the logo and hamburger icon, compressing both and creating visual clutter.

Expected Behavior

The search field must be completely hidden on mobile viewports (below Docusaurus's mobile breakpoint of 996px). Desktop users retain the search field as-is.

File(s) Impacted

• src/css/custom.css
• Possibly docusaurus.config.ts
• Fallback: src/theme/SearchBar/index.js (if CSS approach is insufficient)

Implementation Approach

Add a CSS rule in src/css/custom.css to hide the search container on mobile:

@media (max-width: 996px) {
  .navbar .react-autocomplete,
  .navbar [class*="searchBox"],
  .navbar .navbar__search {
    display: none !important;
  }
}

Alternative: If hiding via CSS proves fragile against the Lunr search plugin's DOM structure, swizzle the SearchBar component (src/theme/SearchBar/index.js) and conditionally render null below the breakpoint using a useWindowSize() hook or a CSS module class.

Note: For users on mobile who need search, we may introduce a search icon in the hamburger menu in a future iteration — but that is out of scope for this fix.

Acceptance Criteria

• Search field is not visible at viewport widths ≤ 996px
• Search field renders normally at viewport widths > 996px
• No layout shift when resizing across the 996px breakpoint
• Keyboard shortcut (Ctrl+K / Cmd+K) is not active on mobile (optional, low priority)

---

Branch strategy: All responsive fixes will land on a single branch (fix/responsive-layout) with one PR against main. Commits grouped by sprint.