Fix layout issue (specifically to disallow scrolling on mobile)

.eslintrc.json

@@ -6,8 +6,5 @@
   ],
   "globals": {
     "React": "readonly"
-  },
-  "rules": {
-    "no-unused-vars": "warn"
   }
 }

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

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 = () => {

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>

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"

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}

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>
   );
 }

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>

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"
     >

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

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)'],
       }
     }
   },