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).

Author: w3bdesign

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,