From 748bd054fbcb20931e880e6c4332f545d687df26 Mon Sep 17 00:00:00 2001
From: Dwayne Charrington <dwaynecharrington@gmail.com>
Date: Tue, 17 Dec 2024 07:21:18 +1000
Subject: [PATCH] feat(header): fix mobile menu padding

Make sure all items are accessible.
---
 themes/aurelia-theme/assets/css/main.css          | 6 +++++-
 themes/aurelia-theme/layouts/partials/header.html | 2 +-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/themes/aurelia-theme/assets/css/main.css b/themes/aurelia-theme/assets/css/main.css
index 7b8b0ea..08d220c 100644
--- a/themes/aurelia-theme/assets/css/main.css
+++ b/themes/aurelia-theme/assets/css/main.css
@@ -75,7 +75,7 @@
     100% {
       background-position: 0% 50%;
     }
-    50% {
+    50% { 
       background-position: 100% 50%;
     }
   }
@@ -83,6 +83,10 @@
   .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
index 9da3d0c..be9d421 100644
--- 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">