From ad618809f20f9c597a04482bae0143924d6d9a13 Mon Sep 17 00:00:00 2001
From: Timothy Armes <tim@timothyarmes.com>
Date: Fri, 7 Jul 2023 08:09:34 +0200
Subject: [PATCH] Fix layout issue (specifically to disallow scrolling on
 mobile)

---
 .eslintrc.json                             | 3 ---
 .vscode/settings.json                      | 3 +++
 app/[lang]/components/HamburgerMenu.tsx    | 3 +--
 app/[lang]/components/TestableLayout.tsx   | 6 ++----
 app/[lang]/contactez-nous/page.tsx         | 2 +-
 app/[lang]/page.tsx                        | 2 +-
 app/[lang]/qui-sommes-nous/page.tsx        | 6 +++---
 app/[lang]/tournois/TournamentMap.tsx      | 2 +-
 app/[lang]/tournois/TournamentTable.tsx    | 2 +-
 app/[lang]/tournois/TournamentsDisplay.tsx | 2 +-
 tailwind.config.js                         | 3 ++-
 11 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/.eslintrc.json b/.eslintrc.json
index 4e419a9..5292628 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -6,8 +6,5 @@
   ],
   "globals": {
     "React": "readonly"
-  },
-  "rules": {
-    "no-unused-vars": "warn"
   }
 }
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 783d6d3..94198d8 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -6,10 +6,12 @@
     "defaulticon",
     "Échecs",
     "Fédération",
+    "Florifourchette",
     "Française",
     "kodingdotninja",
     "Lente",
     "localisation",
+    "markercluster",
     "moveend",
     "randomisation",
     "Rapide",
@@ -19,6 +21,7 @@
     "Spiderfy",
     "spiderified",
     "tailwindcss",
+    "timothyarmes",
     "tournois",
     "unspiderfied",
     "unspiderfy"
diff --git a/app/[lang]/components/HamburgerMenu.tsx b/app/[lang]/components/HamburgerMenu.tsx
index 1c4861b..0025c64 100644
--- a/app/[lang]/components/HamburgerMenu.tsx
+++ b/app/[lang]/components/HamburgerMenu.tsx
@@ -9,7 +9,6 @@ import Link from "next-intl/link";
 import { useTranslations } from "next-intl";
 
 import useHamburgerClose from "@/hooks/useHamburgerClose";
-import ThemeSwitcher from "./ThemeSwitcher";
 
 const HamburgerMenu = ({
   menuVisible,
@@ -25,7 +24,7 @@ const HamburgerMenu = ({
     timeoutRef.current = setTimeout(() => {
       setMenuVisible(false);
       setMouseOverMenu(false);
-    }, 2000);
+    }, 4000);
   };
 
   const handleMouseEnterMenu = () => {
diff --git a/app/[lang]/components/TestableLayout.tsx b/app/[lang]/components/TestableLayout.tsx
index 10d243a..dcc8188 100644
--- a/app/[lang]/components/TestableLayout.tsx
+++ b/app/[lang]/components/TestableLayout.tsx
@@ -16,11 +16,9 @@ const TestableLayout = ({
 }) => {
   return (
     <NextIntlClientProvider locale={locale} messages={messages}>
-      <div className="flex min-h-screen flex-col bg-white font-sans leading-normal tracking-normal dark:bg-gray-800">
+      <div className="bg-white font-sans leading-normal tracking-normal dark:bg-gray-800">
         <Navbar />
-        <div className="relative mb-20 flex flex-1 justify-center">
-          {children}
-        </div>
+        <div className="relative h-content overflow-scroll">{children}</div>
         <Footer />
       </div>
     </NextIntlClientProvider>
diff --git a/app/[lang]/contactez-nous/page.tsx b/app/[lang]/contactez-nous/page.tsx
index 69ac87a..8b51f60 100644
--- a/app/[lang]/contactez-nous/page.tsx
+++ b/app/[lang]/contactez-nous/page.tsx
@@ -7,7 +7,7 @@ export default function Contact() {
 
   return (
     <section className="grid place-items-center bg-white dark:bg-gray-800">
-      <div className="mx-auto max-w-screen-md px-4 pb-16 pt-8 lg:pt-16">
+      <div className="mx-auto max-w-screen-md px-4 py-8 lg:py-16">
         <h2
           className="mb-4 text-center text-4xl font-extrabold tracking-tight text-gray-900 dark:text-white"
           data-test="header2"
diff --git a/app/[lang]/page.tsx b/app/[lang]/page.tsx
index 6a98bb5..94a1593 100644
--- a/app/[lang]/page.tsx
+++ b/app/[lang]/page.tsx
@@ -8,7 +8,7 @@ export default function Home() {
   const t = useTranslations("Home");
 
   return (
-    <header className="relative flex flex-1 items-center justify-center">
+    <header className="relative flex h-full items-center justify-center">
       <div className="absolute h-full w-full brightness-[0.2]">
         <Image
           src={bgImage}
diff --git a/app/[lang]/qui-sommes-nous/page.tsx b/app/[lang]/qui-sommes-nous/page.tsx
index 19eecbf..b5fafca 100644
--- a/app/[lang]/qui-sommes-nous/page.tsx
+++ b/app/[lang]/qui-sommes-nous/page.tsx
@@ -5,8 +5,8 @@ export default function About() {
   const t = useTranslations("About");
 
   return (
-    <header className="mb-16 grid place-items-center bg-white dark:bg-gray-800">
-      <div className="h-full max-w-5xl bg-white px-4 pt-8 lg:pt-16 dark:bg-gray-800">
+    <section className="grid place-items-center bg-white dark:bg-gray-800">
+      <div className="max-w-5xl px-4 py-8 lg:py-16">
         <h2
           className="mb-8 text-center text-4xl font-extrabold tracking-tight text-gray-900 dark:text-white"
           data-test="header2"
@@ -117,6 +117,6 @@ export default function About() {
           })}
         </p>
       </div>
-    </header>
+    </section>
   );
 }
diff --git a/app/[lang]/tournois/TournamentMap.tsx b/app/[lang]/tournois/TournamentMap.tsx
index 157f013..bc47b02 100644
--- a/app/[lang]/tournois/TournamentMap.tsx
+++ b/app/[lang]/tournois/TournamentMap.tsx
@@ -265,7 +265,7 @@ export default function TournamentMap() {
   };
 
   return (
-    <section id="tournament-map" className="flex h-screen flex-col pb-[144px]">
+    <section id="tournament-map" className="flex h-content flex-col">
       <div className="p-3 lg:hidden">
         <TimeControlFilters />
       </div>
diff --git a/app/[lang]/tournois/TournamentTable.tsx b/app/[lang]/tournois/TournamentTable.tsx
index 6b5d135..2f39bbf 100644
--- a/app/[lang]/tournois/TournamentTable.tsx
+++ b/app/[lang]/tournois/TournamentTable.tsx
@@ -46,7 +46,7 @@ export default function TournamentTable() {
 
   return (
     <section
-      className="tournament-table grid w-full auto-rows-max pb-20 lg:col-start-2 lg:col-end-3 lg:h-screen lg:overflow-y-scroll lg:pb-[144px]"
+      className="tournament-table grid w-full auto-rows-max pb-20 lg:col-start-2 lg:col-end-3 lg:h-content lg:overflow-y-scroll lg:pb-0"
       id="tournament-table"
       data-test="tournament-table-div"
     >
diff --git a/app/[lang]/tournois/TournamentsDisplay.tsx b/app/[lang]/tournois/TournamentsDisplay.tsx
index d4adf62..ad7c8bf 100644
--- a/app/[lang]/tournois/TournamentsDisplay.tsx
+++ b/app/[lang]/tournois/TournamentsDisplay.tsx
@@ -12,7 +12,7 @@ import TournamentTable from "./TournamentTable";
 const LoadingMap = () => {
   const t = useTranslations("Tournaments");
   return (
-    <div className="grid h-screen place-items-center bg-white text-gray-900 dark:bg-gray-800 dark:text-white">
+    <div className="grid h-content place-items-center bg-white text-gray-900 dark:bg-gray-800 dark:text-white">
       <p>{t("loading")}</p>
     </div>
   );
diff --git a/tailwind.config.js b/tailwind.config.js
index 5e5a9bb..4acee19 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -10,7 +10,8 @@ module.exports = {
     extend: {
       height: {
         // We use 100svh, falling back to vh for old browsers
-        screen: ['100vh', '100svh'],
+        // The 144px is for the header and footer
+        content: ['calc(100vh - 144px)', 'calc(100svh - 144px)'],
       }
     }
   },