fix: improve mobile navigation and layouts on docs site

[michaelmcnees]

Changes

• Replaced dual hamburger menu buttons with a single bottom navigation bar on mobile
• Fixed mobile docs navigation — bottom bar with home, menu, and search actions
• Added proper bottom padding to content so nothing hides behind the bottom bar
• Responsive heading sizes (smaller on mobile)
• Smaller code block fonts on touch devices
• Various mobile overflow and spacing fixes

Why bottom nav?

Mobile bottom navigation follows standard thumb-zone conventions for easier one-handed use, which matters for a developer docs site where users often reference docs while working.

[Copilot]

Pull request overview

This PR updates the docs site’s mobile UX by introducing a fixed bottom navigation bar, adjusting docs sidebar behavior for mobile, and applying mobile-specific typography/spacing tweaks to prevent layout overflow and improve readability.

Changes:

• Replaced the previous mobile hamburger/menu approach with a fixed bottom navigation bar (with docs-specific menu toggle).
• Updated docs layout/sidebar to accommodate the bottom bar (extra bottom spacing and mobile drawer sizing).
• Added mobile prose CSS adjustments (heading sizes, code block sizing) and attempted small-screen table overflow handling.

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
site/src/styles/global.css	Adds mobile typography tweaks and new table-wrapper styling intended for small-screen table overflow.
site/src/pages/index.astro	Adds bottom padding to prevent home page content being obscured by the fixed bottom nav on mobile.
site/src/layouts/Docs.astro	Adds bottom padding (mobile) and overflow-x-hidden to mitigate mobile overflow issues in docs layout.
site/src/components/Nav.astro	Implements the fixed mobile bottom navigation and JS toggle for the docs mobile sidebar.
site/src/components/DocsSidebar.astro	Adjusts the mobile sidebar drawer height and updates overlay/link close behavior.

Comments suppressed due to low confidence (1)

site/src/components/DocsSidebar.astro:201

• initSidebar() replaces #sidebar-overlay with a cloned node, but closeSidebar() still references the original overlay constant. As a result, clicking the new overlay will call closeSidebar() and attempt to hide the old (detached) overlay, leaving the visible overlay in place. Either avoid cloning/replacing the overlay, or update the reference used by closeSidebar() to the newly inserted node before attaching listeners.

<script is:inline>
function initSidebar() {
  const mobileSidebar = document.getElementById('docs-sidebar-mobile');
  const overlay = document.getElementById('sidebar-overlay');
  if (!mobileSidebar || !overlay) return;

  function closeSidebar() {
    mobileSidebar.classList.add('-translate-x-full');
    overlay.classList.add('hidden');
  }

  const newOverlay = overlay.cloneNode(true);
  overlay.parentNode?.replaceChild(newOverlay, overlay);
  newOverlay.addEventListener('click', closeSidebar);

  mobileSidebar.querySelectorAll('a').forEach((a) => {
    a.addEventListener('click', closeSidebar);
  });

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

initNav() captures a reference to #sidebar-overlay, but DocsSidebar.astro replaces that element via cloneNode/replaceChild. That leaves this handler toggling classes on a detached node, so the overlay (and menu close behavior) can break. Prefer not replacing #sidebar-overlay at all, or re-query the current overlay element inside the click handler (or ensure only one component owns overlay event binding).

[Copilot]

The new bottom padding (pb-16) doesn’t account for env(safe-area-inset-bottom). On devices with a home indicator, the bottom nav height becomes h-14 + safe-area, so 4rem padding may still allow content to be obscured. Consider using a calc that includes the safe-area inset (e.g., pb-[calc(4rem+env(safe-area-inset-bottom))]) or a shared CSS variable derived from the bottom-nav height.

Suggested change

	<main id="main-content" class="pb-16 md:pb-0">
	<main id="main-content" class="pb-[calc(4rem+env(safe-area-inset-bottom))] md:pb-0">

[Copilot]

The pb-16 added for the mobile bottom nav doesn’t include env(safe-area-inset-bottom), so on iOS the last content can still sit under the nav (nav adds safe-area padding in Nav.astro). Consider using padding that includes the safe-area inset (or a shared CSS var) so the docs content always clears the bottom bar.

Suggested change

	<div class="flex min-h-screen pt-16 pb-16 md:pb-0">
	<div class="flex min-h-screen pt-16 pb-[calc(4rem+env(safe-area-inset-bottom))] md:pb-0">

[Copilot]

bottom-14 reserves space for a 56px bottom nav, but the nav also adds padding-bottom: env(safe-area-inset-bottom). On devices with a bottom safe-area inset, the sidebar can overlap the bottom nav/home-indicator region. Consider including the safe-area inset in the sidebar’s bottom offset (or add equivalent padding to the sidebar) to prevent content from being hidden.

Suggested change

	<aside id="docs-sidebar-mobile" class="fixed top-16 left-0 bottom-14 md:bottom-0 z-50 w-72 bg-surface-container-lowest border-r border-outline-variant transform -translate-x-full transition-transform duration-200 lg:hidden overflow-y-auto">
	<aside id="docs-sidebar-mobile" class="fixed top-16 left-0 bottom-[calc(3.5rem+env(safe-area-inset-bottom))] md:bottom-0 z-50 w-72 bg-surface-container-lowest border-r border-outline-variant transform -translate-x-full transition-transform duration-200 lg:hidden overflow-y-auto">

[Copilot]

The new .prose .table-wrapper styles won’t have any effect unless tables are actually wrapped in an element with class="table-wrapper" (search in site/src shows no usage). If the goal is to make markdown tables scroll on mobile, consider applying overflow-x: auto/display: block directly to .prose table under a small-screen media query or adding a markdown/rehype transform that wraps generated tables.

[Copilot]

overflow-x-hidden on the docs container can clip any horizontally overflowing content (notably wide markdown tables). Since the new table-scrolling styles currently target a .table-wrapper that isn’t present, this may result in table content being cut off with no way to scroll. Consider removing overflow-x-hidden or ensuring tables/code blocks have an internal horizontal scroll container before hiding overflow on the page wrapper.

Suggested change

	<div class="mx-auto max-w-[1280px] px-4 sm:px-6 overflow-x-hidden">
	<div class="mx-auto max-w-[1280px] px-4 sm:px-6">

[Copilot]

PR description mentions the mobile bottom bar includes “home, menu, and search” actions, but the implemented bottom nav has Home, Menu (docs only), Docs, and GitHub — no search action/link. Either update the PR description to match what shipped, or add the intended search affordance to the bottom nav.