diff --git a/src/components/Header.astro b/src/components/Header.astro
index 8701f07..95c185f 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -130,16 +130,23 @@ const currentPath = Astro.url.pathname;
   </div>
 
   <!-- Mobile Menu Overlay -->
+  <!-- Explicit viewport sizing: the header's `backdrop-blur` makes it the
+       containing block for fixed descendants, so `inset-0` alone would only
+       cover the header. w-screen + h-[100dvh] force true full-viewport cover. -->
   <div
     id="mobile-menu-overlay"
-    class="fixed inset-0 bg-secondary-900/50 backdrop-blur-sm opacity-0 pointer-events-none transition-opacity duration-300 lg:hidden"
+    class="fixed top-0 left-0 w-screen h-[100dvh] bg-secondary-900/50 backdrop-blur-sm opacity-0 pointer-events-none transition-opacity duration-300 lg:hidden"
     aria-hidden="true"
   ></div>
 
   <!-- Mobile Menu Panel -->
+  <!-- Full-screen overlay panel. Uses explicit viewport units (w-screen /
+       h-[100dvh]) rather than h-full because the header's backdrop-filter is
+       the containing block for this fixed element, so `h-full` would collapse
+       to the header's ~64px height (the original "small box" bug). -->
   <div
     id="mobile-menu"
-    class="fixed top-0 right-0 h-full w-80 max-w-[85vw] bg-white dark:bg-secondary-900 shadow-2xl transform translate-x-full transition-transform duration-300 ease-out lg:hidden"
+    class="fixed top-0 left-0 w-screen h-[100dvh] min-h-screen bg-white dark:bg-secondary-900 shadow-2xl transform translate-x-full transition-transform duration-300 ease-out lg:hidden"
     role="dialog"
     aria-modal="true"
     aria-label="Mobile navigation menu"