Fix mobile nav dropdown to use proper overlay positioning

kutcode · claude · kutcode · commit 90d45e8b7c72 · 2026-03-18T15:55:13.000-04:00
The mobile hamburger menu was overlapping page content because it used
flex-wrap. Switch to absolute positioning with solid background and
box-shadow so the dropdown appears as a clean overlay.

Co-Authored-By: Claude Opus 4.6 &lt;noreply@anthropic.com&gt;
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
@@ -116,6 +116,7 @@ a:hover {
   position: sticky;
   top: 0;
   z-index: 1000;
+  isolation: isolate;
 }
 
 .navbar-brand {
@@ -1105,7 +1106,7 @@ a:hover {
 @media (max-width: 768px) {
   .navbar {
     padding: 0 1rem;
-    flex-wrap: wrap;
+    position: relative;
   }
 
   .navbar-toggle {
@@ -1114,18 +1115,25 @@ a:hover {
 
   .navbar-links {
     display: none;
-    width: 100%;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
     flex-direction: column;
-    padding: 0.75rem 0;
+    padding: 0.5rem 1rem 1rem;
     gap: 0.15rem;
+    background: var(--bg-card);
+    border-bottom: 1px solid var(--border);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+    z-index: 999;
   }
 
   .navbar-links.open {
     display: flex;
   }
 
   .navbar-links a {
-    padding: 0.6rem 0.75rem;
+    padding: 0.7rem 0.75rem;
     border-radius: var(--radius-sm);
   }
 
