feat(site): mobile bottom nav + responsive fixes

site/src/components/DocsSidebar.astro

@@ -187,17 +187,20 @@ function initSidebar() {
   const overlay = document.getElementById('sidebar-overlay');
   if (!mobileSidebar || !overlay) return;
 
+  const newOverlay = overlay.cloneNode(true);
+  overlay.parentNode?.replaceChild(newOverlay, overlay);
+
   function closeSidebar() {
     mobileSidebar.classList.add('-translate-x-full');
     mobileSidebar.setAttribute('aria-hidden', 'true');
     mobileSidebar.inert = true;
-    overlay.classList.add('hidden');
-    overlay.setAttribute('aria-hidden', 'true');
+    newOverlay.classList.add('hidden');
+    newOverlay.setAttribute('aria-hidden', 'true');
     var menuBtn = document.getElementById('bottom-nav-docs-btn');
     if (menuBtn) menuBtn.setAttribute('aria-expanded', 'false');
   }
 
-  overlay.onclick = closeSidebar;
+  newOverlay.addEventListener('click', closeSidebar);
   mobileSidebar.querySelectorAll('a').forEach((a) => {
     a.onclick = closeSidebar;
   });

site/src/components/Nav.astro

@@ -35,7 +35,7 @@ const isDocs = Astro.url.pathname === '/docs' || Astro.url.pathname.startsWith('
 </nav>
 
 <!-- Mobile bottom navigation bar -->
-<nav id="mobile-bottom-nav" aria-label="Mobile navigation" class="fixed bottom-0 left-0 right-0 z-50 lg:hidden border-t border-outline-variant bg-surface/95 backdrop-blur-md">
+<nav id="mobile-bottom-nav" aria-label="Mobile navigation" class="fixed bottom-0 left-0 right-0 z-50 md:hidden border-t border-outline-variant bg-surface/95 backdrop-blur-md">
   <div class="flex items-center justify-around h-14 px-2">
     <a href="/" class:list={["bottom-nav-item flex flex-col items-center gap-0.5 px-3 py-1 text-[11px] transition-colors", isHome ? "text-primary" : "text-on-surface-variant hover:text-on-surface"]}>
       <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955a1.126 1.126 0 011.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"/></svg>
@@ -78,27 +78,31 @@ const isDocs = Astro.url.pathname === '/docs' || Astro.url.pathname.startsWith('
 function initNav() {
   const btn = document.getElementById('bottom-nav-docs-btn');
   const docsSidebar = document.getElementById('docs-sidebar-mobile');
-  const overlay = document.getElementById('sidebar-overlay');
-  if (!btn || !docsSidebar || !overlay) return;
+  if (!btn || !docsSidebar) return;
 
-  btn.setAttribute('aria-expanded', 'false');
+  // Remove old listeners by cloning
+  const newBtn = btn.cloneNode(true);
+  btn.parentNode?.replaceChild(newBtn, btn);
 
-  btn.onclick = () => {
+  newBtn.setAttribute('aria-expanded', 'false');
+
+  newBtn.addEventListener('click', () => {
+    const liveOverlay = document.getElementById('sidebar-overlay');
     const isOpen = !docsSidebar.classList.contains('-translate-x-full');
     if (isOpen) {
       docsSidebar.classList.add('-translate-x-full');
       docsSidebar.setAttribute('aria-hidden', 'true');
       docsSidebar.inert = true;
-      if (overlay) { overlay.classList.add('hidden'); overlay.setAttribute('aria-hidden', 'true'); }
-      btn.setAttribute('aria-expanded', 'false');
+      if (liveOverlay) { liveOverlay.classList.add('hidden'); liveOverlay.setAttribute('aria-hidden', 'true'); }
+      newBtn.setAttribute('aria-expanded', 'false');
     } else {
       docsSidebar.classList.remove('-translate-x-full');
       docsSidebar.setAttribute('aria-hidden', 'false');
       docsSidebar.inert = false;
-      if (overlay) { overlay.classList.remove('hidden'); overlay.setAttribute('aria-hidden', 'false'); }
-      btn.setAttribute('aria-expanded', 'true');
+      if (liveOverlay) { liveOverlay.classList.remove('hidden'); liveOverlay.setAttribute('aria-hidden', 'false'); }
+      newBtn.setAttribute('aria-expanded', 'true');
     }
-  };
+  });
 }
 // Defer init until sidebar DOM exists (Nav renders before DocsSidebar).
 // Bail after a few frames if sidebar never appears (non-docs pages).

site/src/layouts/Docs.astro

@@ -24,8 +24,8 @@ const { prev, next } = getPrevNext(currentPath);
 
 <Base title={`${title} - Mantle Docs`}>
   <Nav />
-  <div class="mx-auto max-w-[1280px] px-4 sm:px-6">
-    <div class="flex min-h-screen pt-16 pb-20 lg:pb-0">
+  <div class="mx-auto max-w-[1280px] px-4 sm:px-6 overflow-x-hidden">
+    <div class="flex min-h-screen pt-16 pb-16 md:pb-0">
       <DocsSidebar currentPath={currentPath} />
 
       <!-- Main content -->

site/src/pages/index.astro

@@ -13,7 +13,7 @@ import Footer from '../components/Footer.astro';
 <Base title="Mantle — Headless AI Workflow Automation">
   <div data-pagefind-ignore>
   <Nav isHome={true} />
-  <main id="main-content" class="pb-20 lg:pb-0">
+  <main id="main-content" class="pb-16 md:pb-0">
     <Hero />
     <Features />
     <HowItWorks />

site/src/styles/global.css

@@ -403,8 +403,7 @@ body {
   }
 
   .prose code {
-    overflow-wrap: anywhere;
-    word-break: normal;
+    overflow-wrap: break-word;
   }
 }