From 537c9f158f1e0420e7b873d2f43cedd8cbffeb02 Mon Sep 17 00:00:00 2001
From: Sarah Sanders <sarah.sanders@docker.com>
Date: Wed, 14 May 2025 14:47:01 -0400
Subject: [PATCH] fix: mobile footer issue (#22639)

## Description
- The Contact support button was appearing above the sidenav slideout on
mobile, this fixes that
- Tested on mobile in browser and mobile device
- Verified there is no impact to desktop web version

## Related issues or tickets
https://docker.atlassian.net/browse/ENGDOCS-2603

## Reviews
- [ ] Technical review
- [ ] Editorial review
- [ ] Product review
---
 hugo_stats.json              | 1 -
 layouts/_default/baseof.html | 4 ++--
 layouts/partials/footer.html | 2 +-
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/hugo_stats.json b/hugo_stats.json
index 0ba8fdcc0a..b1aeaa2a97 100644
--- a/hugo_stats.json
+++ b/hugo_stats.json
@@ -115,7 +115,6 @@
       "Using-the-GUI",
       "VS-Code",
       "Vue",
-      "WSL-2-backend-Arm-Beta",
       "WSL-2-backend-x86_64",
       "Web-browser",
       "What-are-the-key-features-of-Docker-Desktop",
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index fd991c9923..734cc86513 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -29,7 +29,7 @@
       class="md:h-[calc(100vh-64px)] fixed md:sticky top-0 md:top-16 z-40 hidden h-screen flex-none overflow-y-auto overflow-x-hidden bg-background-light dark:bg-gray-dark-100 w-full md:z-auto md:block md:w-[300px]"
       :class="{ 'hidden': ! $store.showSidebar }">
       <!-- Gray backdrop on small screens -->
-      <div class="fixed bg-black/50 md:hidden" x-show="$store.showSidebar" @click="openSidebar = false"
+      <div class="fixed bg-black/50 md:hidden z-30" x-show="$store.showSidebar" @click="openSidebar = false"
         x-transition.opacity></div>
       <div class="z-50 w-full bg-background-light p-4 dark:bg-gray-dark-100 md:block md:w-[300px]">
         <!-- Collapse button for small screens -->
@@ -53,7 +53,7 @@
     </div>
   </main>
 
-  <footer class="w-full">{{ partialCached "footer.html" . }}</footer>
+  <footer class="w-full z-10 relative">{{ partialCached "footer.html" . }}</footer>
 
   {{/* Load the YouTube player if the page embeds a YouTube video */}}
   {{ with .Store.Get "youtube" }}
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index d35b4ce95f..aae7371099 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -1,4 +1,4 @@
-<div class="flex justify-center py-8 px-4 bg-gray-light-100 dark:bg-gray-dark-200">
+<div class="flex justify-center py-8 px-4 bg-gray-light-100 dark:bg-gray-dark-200 relative z-10">
   {{ partialCached "components/support-button.html" . }}
 </div>
 <div class="flex justify-center pt-10 pb-20 px-4 bg-gray-light-100 dark:bg-gray-dark-200">