From d3c8ea321142f5c5eec875701f2bd0ae4b211601 Mon Sep 17 00:00:00 2001
From: Daniel Fjeldstad <45217974+w3bdesign@users.noreply.github.com>
Date: Wed, 4 Sep 2024 07:45:52 +0200
Subject: [PATCH] Fix mobile menu covering page

Fixes #1352

Adjust the mobile menu height and z-index to prevent it from covering the entire page on mobile.

* Adjust the height of the mobile menu to `calc(100vh-4rem)` to account for the footer height.
* Update the z-index of the mobile menu to `z-10` to ensure it is placed above the fixed footer menu.

---

For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/w3bdesign/nuxtjs-woocommerce/issues/1352?shareId=XXXX-XXXX-XXXX-XXXX).
---
 components/Layout/LayoutMobileMenu.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/Layout/LayoutMobileMenu.vue b/components/Layout/LayoutMobileMenu.vue
index ea4d47c1..f5dc571e 100644
--- a/components/Layout/LayoutMobileMenu.vue
+++ b/components/Layout/LayoutMobileMenu.vue
@@ -2,7 +2,7 @@
   <div class="relative">
     <div
       v-if="!firstRender"
-      class="fixed top-0 left-0 h-[100vh] w-screen mt-4 z-0 bg-white animate__animated"
+      class="fixed top-0 left-0 h-[calc(100vh-4rem)] w-screen mt-4 z-10 bg-white animate__animated"
       :class="{
         animate__fadeInLeft: expandedMenu,
         animate__fadeOutRight: !expandedMenu && !firstRender,