From a732508429f0ac2c6d2668279cfd6c70d78b6f25 Mon Sep 17 00:00:00 2001
From: Owen Rees <owenrees82@gmail.com>
Date: Sat, 10 Jun 2023 12:44:42 +0200
Subject: [PATCH] table overflow fixed

---
 TODO                           |  2 --
 components/Footer.tsx          | 11 +++++++++++
 components/Navbar.tsx          |  2 +-
 components/TournamentTable.tsx | 17 +++++++++--------
 package-lock.json              |  9 +++++++++
 package.json                   |  1 +
 6 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/TODO b/TODO
index 71b4247..57101ba 100644
--- a/TODO
+++ b/TODO
@@ -8,8 +8,6 @@ tests for tournois, testing the loading of map and table, then counting the mark
 
 logo for navbar and favicon
 
-tournament table scroll
-
 hover on table needs fixing - this only seemed to happen once I moved the logic into its own hook
 
 document my new hook
diff --git a/components/Footer.tsx b/components/Footer.tsx
index de98578..0428600 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -1,9 +1,20 @@
+import Link from "next/link";
+import { FaGithub } from "react-icons/fa";
+
 export default function Footer() {
   return (
     <footer className="grid grid-cols-2 bg-gray-800 text-white p-3">
       <div>
         <p>&copy; {new Date().getFullYear()} - Owen Rees</p>
       </div>
+      <div>
+        <Link
+          href="https://github.com/TheRealOwenRees/echecsfrance"
+          target="_blank"
+        >
+          <FaGithub />
+        </Link>
+      </div>
     </footer>
   );
 }
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index 3dea40e..f180b40 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -13,7 +13,7 @@ export default function Navbar() {
           </Link>
         </div>
         <div className="flex w-full pt-2 justify-center md:w-1/2 md:justify-end">
-          <ul className="list-reset text-white no-underline flex flex-1 md:flex-none items-center">
+          <ul className="list-reset text-white no-underline flex flex-1 justify-around md:flex-none items-center">
             <li className="mr-10">
               <Link
                 className="inline-block border-b-4 py-5 border-transparent hover:border-teal-600 transition-all ease-in-out duration-300"
diff --git a/components/TournamentTable.tsx b/components/TournamentTable.tsx
index 3ddf7e2..7b78339 100644
--- a/components/TournamentTable.tsx
+++ b/components/TournamentTable.tsx
@@ -16,11 +16,12 @@ export default function TournamentTable({
     setFilteredTournamentData(tournamentFilter);
   }, [tournamentFilter]);
 
+  console.log(filteredTournamentData.length);
+
+  const stickyHeader = "sticky top-0 p-3 bg-gray-600";
+
   return (
-    <section
-      id="tournament-table"
-      className="w-full grid h-[calc(100vh-176px)] md:h-[calc(100vh-82px)] lg:h-[calc(100vh-132px)] lg:col-start-2 lg:col-end-3"
-    >
+    <section className="w-full grid auto-rows-max h-[calc(100vh-176px)] md:h-[calc(100vh-82px)] lg:h-[calc(100vh-132px)] lg:col-start-2 lg:col-end-3">
       <SearchBar
         tournamentFilter={tournamentFilter}
         setTournamentFilter={setTournamentFilter}
@@ -28,10 +29,10 @@ export default function TournamentTable({
       <table className="relative table-fixed w-full text-center text-xs">
         <thead className="bg-gray-600 text-white">
           <tr>
-            <th className="sticky top-0 p-3 bg-gray-600">Date</th>
-            <th className="sticky top-0 p-3 bg-gray-600">Ville</th>
-            <th className="sticky top-0 p-3 bg-gray-600">Tournois</th>
-            <th className="sticky top-0 p-3 bg-gray-600">Cadence</th>
+            <th className={stickyHeader}>Date</th>
+            <th className={stickyHeader}>Ville</th>
+            <th className={stickyHeader}>Tournois</th>
+            <th className={stickyHeader}>Cadence</th>
           </tr>
         </thead>
         <tbody>{filteredTournamentData}</tbody>
diff --git a/package-lock.json b/package-lock.json
index 42bfd2b..ac50789 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,6 +21,7 @@
         "postcss": "8.4.23",
         "react": "18.2.0",
         "react-dom": "18.2.0",
+        "react-icons": "^4.9.0",
         "react-leaflet": "^4.2.1",
         "tailwindcss": "3.3.2",
         "typescript": "5.0.4"
@@ -8061,6 +8062,14 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-icons": {
+      "version": "4.9.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.9.0.tgz",
+      "integrity": "sha512-ijUnFr//ycebOqujtqtV9PFS7JjhWg0QU6ykURVHuL4cbofvRCf3f6GMn9+fBktEFQOIVZnuAYLZdiyadRQRFg==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
diff --git a/package.json b/package.json
index d7eda42..f6274b2 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "postcss": "8.4.23",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-icons": "^4.9.0",
     "react-leaflet": "^4.2.1",
     "tailwindcss": "3.3.2",
     "typescript": "5.0.4"