Fix mobile display (#77)

app/[lang]/tournois/TournamentMap.tsx

@@ -11,7 +11,7 @@ import {
   LayerGroup,
   useMapEvent,
 } from "react-leaflet";
-import { FaChevronDown } from "react-icons/fa";
+import { FaAngleDoubleDown } from "react-icons/fa";
 import { useAtomValue, useSetAtom } from "jotai";
 
 import "leaflet/dist/leaflet.css";
@@ -265,10 +265,7 @@ export default function TournamentMap() {
   };
 
   return (
-    <section
+    <section id="tournament-map" className="flex h-screen flex-col pb-[144px]">
-      id="tournament-map"
-      className="flex h-[calc(100vh-144px)] flex-col"
-    >
       <div className="p-3 lg:hidden">
         <TimeControlFilters />
       </div>
@@ -312,7 +309,7 @@ export default function TournamentMap() {
           className="p-3 text-teal-900 dark:text-white"
           onClick={onScrollToTable}
         >
-          <FaChevronDown />
+          <FaAngleDoubleDown />
         </button>
       </div>
     </section>

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-[calc(100vh-144px)] lg:overflow-y-scroll"
+      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]"
       id="tournament-table"
       data-test="tournament-table-div"
     >

tailwind.config.js

@@ -6,6 +6,13 @@ module.exports = {
     "./components/**/*.{js,ts,jsx,tsx,mdx}",
     "./app/**/*.{js,ts,jsx,tsx,mdx}",
   ],
-  theme: {},
+  theme: {
+    extend: {
+      height: {
+        // We use 100svh, falling back to vh for old browsers
+        screen: ['100vh', '100svh'],
+      }
+    }
+  },
   plugins: [],
 };