Merge pull request #76 from timothyarmes/fix-scroll

Don't scroll on mobile

.vscode/settings.json

@@ -7,6 +7,7 @@
     "Échecs",
     "Fédération",
     "Française",
+    "kodingdotninja",
     "Lente",
     "localisation",
     "moveend",
@@ -17,6 +18,7 @@
     "spiderfied",
     "Spiderfy",
     "spiderified",
+    "tailwindcss",
     "tournois",
     "unspiderfied",
     "unspiderfy"

app/[lang]/tournois/TournamentTable.tsx

@@ -4,6 +4,7 @@ import { useEffect } from "react";
 import { useTranslations } from "next-intl";
 import { useAtomValue, useSetAtom, useAtom } from "jotai";
 import { twMerge } from "tailwind-merge";
+import { FaExternalLinkAlt } from "react-icons/fa";
 
 import {
   filteredTournamentsListAtom,
@@ -12,13 +13,12 @@ import {
   debouncedHoveredMapTournamentIdAtom,
   debouncedHoveredListTournamentIdAtom,
 } from "@/app/atoms";
+import { useBreakpoint } from "@/hooks/tailwind";
 
 import SearchBar from "./SearchBar";
 import TimeControlFilters from "./TimeControlFilters";
 import ScrollToTopButton from "./ScrollToTopButton";
 
-import { FaExternalLinkAlt } from "react-icons/fa";
-
 export default function TournamentTable() {
   const t = useTranslations("Tournaments");
 
@@ -32,15 +32,17 @@ export default function TournamentTable() {
     debouncedHoveredListTournamentIdAtom
   );
 
+  const isLg = useBreakpoint("lg");
+
   useEffect(() => {
-    if (debouncedHoveredMapTournamentId === null) return;
+    if (!isLg || debouncedHoveredMapTournamentId === null) return;
 
     const tournamentRow = document.getElementById(
       debouncedHoveredMapTournamentId
     );
 
     tournamentRow?.scrollIntoView({ behavior: "smooth" });
-  }, [debouncedHoveredMapTournamentId]);
+  }, [debouncedHoveredMapTournamentId, isLg]);
 
   return (
     <section
@@ -87,7 +89,7 @@ export default function TournamentTable() {
             <th className="sticky top-0 bg-teal-600 p-3 text-white dark:bg-gray-600">
               {t("timeControl")}
             </th>
-            <th className="sticky w-[50px] top-0 bg-teal-600 p-3 text-white dark:bg-gray-600"></th>
+            <th className="sticky top-0 w-[50px] bg-teal-600 p-3 text-white dark:bg-gray-600"></th>
           </tr>
         </thead>
 

hooks/tailwind.ts

@@ -0,0 +1,7 @@
+import create from "@kodingdotninja/use-tailwind-breakpoint";
+import resolveConfig from "tailwindcss/resolveConfig";
+
+import tailwindConfig from "@/tailwind.config.js";
+const config = resolveConfig(tailwindConfig);
+
+export const { useBreakpoint } = create(config.theme!.screens);

package-lock.json

@@ -8,6 +8,7 @@
       "name": "client",
       "version": "0.1.0",
       "dependencies": {
+        "@kodingdotninja/use-tailwind-breakpoint": "^0.0.5",
         "@next/bundle-analyzer": "^13.4.7",
         "@types/node": "20.3.2",
         "@types/react": "18.2.14",
@@ -515,6 +516,19 @@
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
       "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw=="
     },
+    "node_modules/@kodingdotninja/use-tailwind-breakpoint": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/@kodingdotninja/use-tailwind-breakpoint/-/use-tailwind-breakpoint-0.0.5.tgz",
+      "integrity": "sha512-7h52zL+l+14u9diyjVcGoS5NRIwrc6euIGlHDwtJXlrR3h31RNyTrOfimy7PJTvS4fFdNgbzyrNcGfhj3sDRfQ==",
+      "peerDependencies": {
+        "react": ">=16.8"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@next/bundle-analyzer": {
       "version": "13.4.7",
       "resolved": "https://registry.npmjs.org/@next/bundle-analyzer/-/bundle-analyzer-13.4.7.tgz",

package.json

@@ -13,6 +13,7 @@
     "cypress": "cypress open"
   },
   "dependencies": {
+    "@kodingdotninja/use-tailwind-breakpoint": "^0.0.5",
     "@next/bundle-analyzer": "^13.4.7",
     "@types/node": "20.3.2",
     "@types/react": "18.2.14",