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

@@ -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 lg: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 lg: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;
   }
 }