From 3b9ace2b8945273dc552e15be5185ccc6e5ecc05 Mon Sep 17 00:00:00 2001
From: Benjamin Bourgeois <benjamin.bourgeois@zenika.com>
Date: Thu, 9 Mar 2023 10:01:29 +0100
Subject: [PATCH] :bug: fix mobile margin bottom (#592)

---
 src/pages/_app.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 8d66b451..b82ccd44 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -9,6 +9,7 @@ import { DarkModeProvider } from "../utils/darkMode";
 import { i18nContext } from "../utils/i18nContext";
 import { TutorialModeProvider } from "../utils/tutorialMode";
 import { usei18n } from "../utils/usei18n";
+import { useMediaQuery } from "react-responsive";
 
 const App = ({ Component, pageProps }) => {
   /*
@@ -37,6 +38,9 @@ const App = ({ Component, pageProps }) => {
   const [tutorialMode, setTutorialMode] = useState(
     storedTutorialMode === "true"
   );
+  const isDesktop = useMediaQuery({
+    query: "(min-device-width: 1280px)",
+  });
 
   const changeTutorialMode = (tutorialMode: boolean) => {
     setTutorialMode(tutorialMode);
@@ -93,7 +97,11 @@ const App = ({ Component, pageProps }) => {
                   content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no, user-scalable=no, viewport-fit=cover"
                 />
               </Head>
-              <div className={`${darkMode ? "dark" : ""}`}>
+              <div
+                className={`${darkMode ? "dark" : ""} ${
+                  isDesktop ? "" : "mb-14"
+                }`}
+              >
                 <div className="w-full min-h-screen overflow-x-hidden flex flex-auto flex-col text-base bg-light-med dark:bg-dark-med  text-light-graytext dark:text-dark-graytext">
                   <Component {...{ pathName, ...pageProps }} />
                 </div>