Simplify the mobile docs header

cspell-allow-list.txt

@@ -76,6 +76,7 @@ Bitwarden
 blkid
 blobstore
 blurple
+borderless
 browsable
 buildconfig
 Burkina

src/components/Layout.tsx

@@ -44,14 +44,14 @@ function Header() {
 		<header className="sticky top-0 z-50">
 			<div
 				className={clsx(
-					'flex flex-none flex-wrap items-center justify-between bg-light-bg px-4 py-6 shadow-md shadow-slate-900/5 transition duration-500 dark:border-dark-border dark:shadow-none sm:px-6 lg:border-b lg:border-light-border lg:px-8',
+					'flex flex-none flex-wrap items-center justify-between bg-light-bg px-4 py-2.5 shadow-md shadow-slate-900/5 transition duration-500 dark:border-dark-border dark:shadow-none sm:px-6 lg:border-b lg:border-light-border lg:px-8 lg:py-6',
 					isScrolled
 						? 'dark:bg-dark-bg-1 dark:backdrop-blur dark:[@supports(backdrop-filter:blur(0))]:bg-dark-bg-1/80'
 						: 'dark:bg-transparent'
 				)}
 			>
 				<div className="mx-auto flex w-full max-w-8xl items-center justify-between sm:px-2 lg:px-8">
-					<div className="mr-6 flex lg:hidden">
+					<div className="-ml-2 mr-2 flex lg:hidden">
 						<MobileNavigation />
 					</div>
 					<div className="relative flex flex-grow basis-0 items-center">
@@ -64,16 +64,16 @@ function Header() {
 						</Link>
 						<Link
 							href="/"
-							className="relative z-10 block md:hidden"
+							className="relative z-10 flex h-11 w-11 items-center justify-center md:hidden"
 							aria-label="Home page"
 						>
 							<LogoMark className="h-6 w-6" />
 						</Link>
 					</div>
-					<div className="-my-5 mr-6 sm:mr-8 md:mr-0">
+					<div className="order-last -mr-2 ml-2 lg:order-none lg:-my-5 lg:ml-0 lg:mr-0">
 						<Search />
 					</div>
-					<div className="relative flex basis-0 items-center justify-end gap-6 sm:gap-6 md:flex-grow">
+					<div className="relative flex items-center justify-end gap-2 lg:flex-grow lg:basis-0 lg:gap-6">
 						{/* Plain anchor: next/link treats this same-origin URL as an
 						    app route and prefetches the changelog app's ~60 assets on
 						    every docs page. */}
@@ -87,10 +87,10 @@ function Header() {
 							</span>
 						</a>
 						<VersionSelector />
-						<ThemeSelector className="relative z-10" />
+						<ThemeSelector className="relative z-10 hidden lg:block" />
 						<Link
 							href="https://github.com/sourcegraph/docs"
-							className="group"
+							className="group hidden lg:block"
 							aria-label="GitHub"
 						>
 							<span className="flex h-7 w-7 items-center justify-center rounded-lg shadow-md shadow-black/5 ring-1 ring-light-border-2 dark:bg-dark-bg-2 dark:ring-inset dark:ring-dark-border">

src/components/MobileNavigation.tsx

@@ -6,6 +6,7 @@ import Link from 'next/link';
 import {usePathname, useSearchParams} from 'next/navigation';
 import {Dialog} from '@headlessui/react';
 import {Navigation} from '@/components/Navigation';
+import {ThemeSelector} from '@/components/ThemeSelector';
 
 function MenuIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
 	return (
@@ -74,7 +75,7 @@ export function MobileNavigation() {
 			<button
 				type="button"
 				onClick={() => setIsOpen(true)}
-				className="relative"
+				className="relative flex h-11 w-11 items-center justify-center"
 				aria-label="Open navigation"
 			>
 				<MenuIcon className="h-6 w-6 stroke-slate-500" />
@@ -88,41 +89,54 @@ export function MobileNavigation() {
 				className="fixed inset-0 z-50 flex items-start overflow-y-auto bg-slate-900/50 pr-10 backdrop-blur lg:hidden"
 				aria-label="Navigation"
 			>
-				<Dialog.Panel className="min-h-full w-full max-w-xs bg-light-bg px-4 pb-12 pt-5 dark:bg-dark-bg sm:px-6">
-					<div className="flex items-center">
+				<Dialog.Panel className="flex h-dvh w-full max-w-xs flex-col bg-light-bg px-4 pb-[max(1rem,env(safe-area-inset-bottom))] pt-2.5 dark:bg-dark-bg sm:px-6">
+					<div className="flex shrink-0 items-center">
 						<button
 							type="button"
 							onClick={() => close()}
+							className="-ml-2 flex h-11 w-11 items-center justify-center"
 							aria-label="Close navigation"
 						>
 							<CloseIcon className="h-6 w-6 stroke-slate-500" />
 						</button>
-						<Link href="/" className="ml-6" aria-label="Home page">
+						<Link
+							href="/"
+							className="ml-2 flex h-11 w-11 items-center justify-center"
+							aria-label="Home page"
+						>
 							<Image
-								className="h-9 w-9"
+								className="h-6 w-6"
 								src="/sourcegraph-mark.svg"
 								alt="Sourcegraph Docs"
 								width={36}
 								height={36}
 							/>
 						</Link>
 					</div>
-					{/* Plain anchor, so next/link does not prefetch the changelog app */}
-					<a
-						href="https://sourcegraph.com/changelog"
-						className="mt-5 inline-flex rounded-md px-1 text-base font-medium text-slate-500 hover:text-vermilion-11 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-vermilion-11/50 dark:text-dark-text-secondary dark:hover:text-vermilion-11"
-					>
-						Changelog
-						<span className="ml-1" aria-hidden="true">
-							↗
-						</span>
-					</a>
-					<Suspense fallback={null}>
-						<Navigation
-							className="mt-5 px-1"
-							onLinkClick={onLinkClick}
-						/>
-					</Suspense>
+					<div className="mt-5 min-h-0 flex-1 overflow-y-auto overscroll-contain pb-5">
+						<Suspense fallback={null}>
+							<Navigation
+								className="px-1"
+								onLinkClick={onLinkClick}
+							/>
+						</Suspense>
+					</div>
+					<div className="shrink-0 border-t border-light-border pt-2 dark:border-dark-border">
+						<ThemeSelector showLabel className="relative" />
+						<a
+							href="https://github.com/sourcegraph/docs"
+							className="flex min-h-11 items-center justify-between rounded-md px-1 text-sm text-slate-500 hover:text-vermilion-11 dark:text-dark-text-secondary dark:hover:text-vermilion-11"
+						>
+							GitHub <span aria-hidden="true">↗</span>
+						</a>
+						{/* Plain anchor, so next/link does not prefetch the changelog app */}
+						<a
+							href="https://sourcegraph.com/changelog"
+							className="flex min-h-11 items-center justify-between rounded-md px-1 text-sm text-slate-500 hover:text-vermilion-11 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-vermilion-11/50 dark:text-dark-text-secondary dark:hover:text-vermilion-11"
+						>
+							Changelog <span aria-hidden="true">↗</span>
+						</a>
+					</div>
 				</Dialog.Panel>
 			</Dialog>
 		</>

src/components/ThemeSelector.tsx

@@ -1,5 +1,6 @@
 import {useTheme} from 'next-themes';
 import {Listbox} from '@headlessui/react';
+import {ChevronDownIcon} from '@heroicons/react/20/solid';
 import clsx from 'clsx';
 
 const themes = [
@@ -44,31 +45,64 @@ function SystemIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
 	);
 }
 
-export function ThemeSelector(
-	props: React.ComponentPropsWithoutRef<typeof Listbox<'div'>>
-) {
+export function ThemeSelector({
+	showLabel = false,
+	...props
+}: React.ComponentPropsWithoutRef<typeof Listbox<'div'>> & {
+	showLabel?: boolean;
+}) {
 	let {theme, setTheme} = useTheme();
 
 	return (
 		<Listbox as="div" value={theme} onChange={setTheme} {...props}>
-			<Listbox.Label className="sr-only">Theme</Listbox.Label>
+			{!showLabel && (
+				<Listbox.Label className="sr-only">Theme</Listbox.Label>
+			)}
 			<Listbox.Button
-				className="flex h-7 w-7 items-center justify-center rounded-lg shadow-md shadow-black/5 ring-1 ring-light-border-2 dark:bg-dark-bg-2 dark:ring-inset dark:ring-dark-border"
-				aria-label="Theme"
+				className={
+					showLabel
+						? 'flex min-h-11 w-full items-center justify-between rounded-md px-1 text-sm text-slate-500 hover:text-vermilion-11 dark:text-dark-text-secondary'
+						: 'flex h-7 w-7 items-center justify-center rounded-lg shadow-md shadow-black/5 ring-1 ring-light-border-2 dark:bg-dark-bg-2 dark:ring-inset dark:ring-dark-border'
+				}
+				aria-label={showLabel ? undefined : 'Theme'}
 			>
-				<LightIcon className={clsx('h-4 w-4 fill-link dark:hidden')} />
-				<DarkIcon
-					className={clsx('hidden h-4 w-4 fill-link dark:block')}
-				/>
+				{showLabel ? (
+					<>
+						<span>Appearance</span>
+						<span className="flex items-center gap-2">
+							{
+								themes.find(option => option.value === theme)
+									?.name
+							}
+							<ChevronDownIcon
+								className="h-4 w-4"
+								aria-hidden="true"
+							/>
+						</span>
+					</>
+				) : (
+					<>
+						<LightIcon className="h-4 w-4 fill-link dark:hidden" />
+						<DarkIcon className="hidden h-4 w-4 fill-link dark:block" />
+					</>
+				)}
 			</Listbox.Button>
-			<Listbox.Options className="absolute left-1/2 top-full mt-3 w-36 -translate-x-1/2 space-y-1 rounded-xl bg-light-bg-1 p-3 text-sm font-medium shadow-md shadow-black/5 ring-1 ring-black/5 dark:bg-dark-bg-2 dark:ring-white/5">
+			<Listbox.Options
+				className={clsx(
+					'absolute z-10 space-y-1 rounded-xl bg-light-bg-1 p-3 text-sm font-medium shadow-md shadow-black/5 ring-1 ring-black/5 dark:bg-dark-bg-2 dark:ring-white/5',
+					showLabel
+						? 'bottom-full left-0 mb-2 w-full'
+						: 'left-1/2 top-full mt-3 w-36 -translate-x-1/2'
+				)}
+			>
 				{themes.map(theme => (
 					<Listbox.Option
 						key={theme.value}
 						value={theme.value}
 						className={({active, selected}) =>
 							clsx(
 								'flex cursor-pointer select-none items-center rounded-xl p-1',
+								showLabel && 'min-h-11',
 								{
 									'text-link': selected,
 									'text-slate-700 dark:text-white':

src/components/VersionSelector.tsx

@@ -78,10 +78,7 @@ export default function VersionSelector() {
 	return (
 		<Menu as="div" className="relative inline-block text-left">
 			<div>
-				<Menu.Button
-					className="inline-flex w-full items-center justify-center gap-x-1.5
-				rounded-md px-2 py-2 text-xs font-medium text-slate-500 shadow-sm ring-1 ring-inset ring-light-border-2 hover:bg-vermilion-08 hover:text-vermilion-11 dark:bg-dark-bg-2 dark:text-dark-paragraph-text dark:ring-inset dark:ring-dark-border"
-				>
+				<Menu.Button className="inline-flex min-h-11 w-full items-center justify-center gap-x-1.5 whitespace-nowrap rounded-md px-2 py-2 text-sm font-medium text-slate-500 ring-inset ring-light-border-2 hover:bg-vermilion-08 hover:text-vermilion-11 dark:text-dark-paragraph-text dark:ring-dark-border lg:min-h-0 lg:text-xs lg:shadow-sm lg:ring-1 lg:dark:bg-dark-bg-2">
 					{selectedVersion.label === 'latest'
 						? 'Latest'
 						: selectedVersion.name}

src/components/search/docsearch/DocSearchButton.tsx

@@ -35,10 +35,10 @@ export const DocSearchButton = React.forwardRef<
 
 	return (
 		<button type="button" aria-label={buttonAriaLabel} {...props} ref={ref}>
-			<div className="group flex h-6 w-6 items-center justify-center sm:justify-start md:h-9 md:w-80 md:flex-none md:rounded-lg md:pl-4 md:pr-3.5 md:text-sm md:ring-1 md:ring-light-border md:hover:ring-slate-400 dark:md:bg-dark-bg-1 dark:md:ring-inset dark:md:ring-dark-border dark:md:hover:ring-slate-500 lg:w-96">
+			<div className="group flex h-11 w-11 items-center justify-center md:w-80 md:flex-none md:justify-start md:rounded-lg md:pl-4 md:pr-3.5 md:text-sm md:ring-1 md:ring-light-border md:hover:ring-slate-400 dark:md:bg-dark-bg-1 dark:md:ring-inset dark:md:ring-dark-border dark:md:hover:ring-slate-500 lg:h-9 lg:w-96">
 				<SearchIcon className="hidden h-5 w-5 fill-slate-400 group-hover:fill-slate-500 dark:fill-slate-500 md:block md:flex-none md:group-hover:fill-slate-400" />
 
-				<div className="mt-1 flex items-center justify-center rounded-lg md:hidden">
+				<div className="flex items-center justify-center rounded-lg md:hidden">
 					<SearchIcon className="h-6 w-6 text-slate-400" />
 				</div>
 				<span className="sr-only md:not-sr-only md:ml-2 md:text-slate-500 md:dark:text-slate-400">