feat(header): fix mobile menu padding

Make sure all items are accessible.
aurelia · Dec 16, 2024 · 748bd05 · 748bd05
1 parent a999395
commit 748bd05
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/themes/aurelia-theme/assets/css/main.css b/themes/aurelia-theme/assets/css/main.css
@@ -75,14 +75,18 @@
     100% {
       background-position: 0% 50%;
     }
-    50% {
+    50% { 
       background-position: 100% 50%;
     }
   }
 
   .pt-safe {
     padding-top: calc(var(--nav-height) + 2rem);
   }
+
+  .pb-safe {
+    padding-bottom: var(--nav-height);
+  } 
 }
 
 html {

diff --git a/themes/aurelia-theme/layouts/partials/header.html b/themes/aurelia-theme/layouts/partials/header.html
@@ -134,7 +134,7 @@ <h3 class="text-xs font-semibold text-gray-400 uppercase tracking-wider">{{ .tit
         </div>
 
         <!-- Mobile Menu -->
-        <div class="hidden md:hidden fixed inset-x-0 left-0 top-16 h-[calc(100vh-4rem)] bg-white z-40 border-t border-gray-100 w-full" id="mobile-menu">
+        <div class="hidden md:hidden fixed inset-x-0 left-0 top-16 h-[calc(100vh-4rem)] bg-white z-40 border-t border-gray-100 w-full overflow-y-auto pb-safe" id="mobile-menu">
             <div class="h-full w-full">
                 <div class="container mx-auto px-4 sm:px-6 lg:px-8">
                     <div class="py-4 space-y-2">