fix(ui): unjam the mobile nav toggle

app/globals.css

@@ -1095,12 +1095,25 @@
     z-index: 70;
     background: color-mix(in srgb, var(--color-ink) 45%, transparent);
     opacity: 0;
+    visibility: hidden;
     pointer-events: none;
-    transition: opacity 220ms ease;
+    /* Touch gestures that start on the dimmed backdrop must not scroll the
+       page underneath; taps still fire, so click-to-close is unaffected. */
+    touch-action: none;
+    /* visibility flips only after the fade finishes, so a fast second tap
+       lands on the backdrop (a no-op close) instead of the trigger below,
+       which used to instantly reopen the drawer — the "jamming" flicker. */
+    transition:
+      opacity 220ms ease,
+      visibility 0s linear 220ms;
   }
   .mobile-nav-overlay-open {
     opacity: 1;
+    visibility: visible;
     pointer-events: auto;
+    transition:
+      opacity 220ms ease,
+      visibility 0s;
   }
   .mobile-nav-panel {
     position: fixed;
@@ -1116,6 +1129,8 @@
     transform: translateX(-100%);
     transition: transform 280ms cubic-bezier(0.65, 0, 0.35, 1);
     overflow-y: auto;
+    /* Scrolling the drawer must never chain into the page behind it. */
+    overscroll-behavior: contain;
   }
   .mobile-nav-panel-open {
     transform: translateX(0);
@@ -1175,6 +1190,18 @@
   }
 
   @media (max-width: 767px) {
+    /* The actions row (theme, sign in, sign up, menu) plus the logo and two
+       16px grid gaps overflow a 360–375px viewport by ~30px, pushing the
+       hamburger half off-screen into the OS edge-swipe zone — taps landed on
+       the bezel/back-gesture instead of the button. Tighten the gaps and
+       drop the GitHub icon (still linked in the footer and the drawer's
+       Contribute/Blog column) so every control is fully on-screen. */
+    .site-header-grid {
+      gap: 8px;
+    }
+    .header-github {
+      display: none;
+    }
     .site-header-actions {
       gap: 2px;
     }

components/patterns/site-header.tsx

@@ -61,7 +61,7 @@ export function SiteHeader({ className }: { className?: string }) {
             href="https://github.com/CodeWithEugene/HackVillage"
             target="_blank"
             rel="noopener noreferrer"
-            className="header-icon"
+            className="header-icon header-github"
             aria-label="HackVillage on GitHub (opens in a new tab)"
           >
             <Github aria-hidden className="size-4" />