Simplify the mobile docs header

[enriquegh]

What

• Simplify the header below the desktop breakpoint: keep the version selector visible as borderless text, place search at the far right, and move Appearance and GitHub into the existing navigation drawer alongside Changelog.
• Reduce the mobile header to 64px and give its controls at least 44px touch targets.
• Keep drawer utilities visible in a separate footer while the documentation navigation scrolls. Reuse the existing theme selector, with a labeled control and an upward-opening menu in the drawer.
• Preserve the desktop header, version-selection logic, search behavior, and navigation data.

Why

The mobile header gives search, version, theme, and GitHub nearly equal visual weight. Moving less-used utilities into the existing drawer reduces clutter without introducing another menu or hiding which documentation version the reader is viewing.

This does not change Algolia indexing. The indexer reads Contentlayer output and navigation data, not the rendered header or drawer. Before/after generated index output is byte-for-byte identical.

Before / after

Actual Chromium screenshots of the same homepage at a 390 × 844 CSS-pixel viewport and 2× scale, in light mode. The baseline is the unchanged PR base in a separate worktree. Development-tool badges are hidden in both captures. These are viewport checks, not physical-device tests.

Before	After

Updated navigation drawer

Testing

• pnpm exec tsc --noEmit — passed.
• pnpm exec eslint src/components/{Layout,MobileNavigation,ThemeSelector,VersionSelector}.tsx src/components/search/docsearch/DocSearchButton.tsx — passed.
• git diff --check — passed.
• Ran node dev/algolia-index.mjs --dry-run on the baseline and changed code: each generated 14,190 records for 506 pages. Compared the complete .algolia directories with diff -qr: records, page mappings, settings, and synonyms are identical. No index was published.
• Inspected rendered layouts in Chromium at 320, 390, 768, and 1280px, including the drawer, light/dark themes, Appearance options, and version dropdown.
• DOM checks confirmed the 320px header controls fit without overlap and have targets at least 44 × 44px; desktop still exposes search, Changelog, version, Theme, and GitHub.
• Checked independent drawer scrolling at 320 × 568px with utilities still visible; selecting Deep Search navigates and closes the drawer.
• Checked theme switching and Escape closing the drawer with focus restored to its trigger.
• Opened search and queried batch changes; results returned successfully.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated
sourcegraph-docs	Ignored	Preview	Sep 18, 2026 11:49pm UTC

[github-actions]

Open the Diff Tour for this PR in Sourcegraph

[marcleblanc2]

Tested on my phone, LGTM. I'm fine with hiding the dark mode selector because the default is auto, and my phone is set to dark mode.