From b90d7a25de96e8f7d638a5f824f0f7a243e700b5 Mon Sep 17 00:00:00 2001
From: Owen Rees <owenrees82@gmail.com>
Date: Tue, 20 Jun 2023 15:37:08 +0200
Subject: [PATCH] scroll button fix

---
 app/tournois/page.tsx            |  2 +-
 components/ScrollToTopButton.tsx |  2 +-
 components/TournamentTable.tsx   | 14 +++++++++-----
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/app/tournois/page.tsx b/app/tournois/page.tsx
index 8d4c38f..03c69d1 100644
--- a/app/tournois/page.tsx
+++ b/app/tournois/page.tsx
@@ -41,7 +41,7 @@ export default async function Tournaments() {
         <div className="">
           <TournamentMap tournamentData={JSON.parse(tournamentData)} />
         </div>
-        <div className="bg-white dark:bg-gray-800 lg:overflow-y-auto">
+        <div className="relative bg-white dark:bg-gray-800 lg:overflow-y-auto">
           <TournamentTable tournamentData={JSON.parse(tournamentData)} />
         </div>
       </main>
diff --git a/components/ScrollToTopButton.tsx b/components/ScrollToTopButton.tsx
index 450e79b..6bfd93c 100644
--- a/components/ScrollToTopButton.tsx
+++ b/components/ScrollToTopButton.tsx
@@ -11,7 +11,7 @@ const ScrollToTopButton = ({ isLgScreen }: { isLgScreen: boolean }) => {
 
   const scrollToTopButtonClass = isLgScreen
     ? "absolute bottom-0 right-3 p-10"
-    : "sticky top-20";
+    : "fixed top-20 right-3";
 
   return (
     <button
diff --git a/components/TournamentTable.tsx b/components/TournamentTable.tsx
index b096933..20c6af8 100644
--- a/components/TournamentTable.tsx
+++ b/components/TournamentTable.tsx
@@ -76,11 +76,15 @@ export default function TournamentTable({
       className="tournament-table w-full grid auto-rows-max pb-20 lg:h-[calc(100vh-174px)] lg:col-start-2 lg:col-end-3 lg:overflow-y-scroll"
       id="tournament-table"
     >
-      <SearchBar
-        tournamentFilter={searchQuery}
-        setTournamentFilter={setSearchQuery}
-      />
-      <ScrollToTopButton isLgScreen={isLgScreen} />
+      <div className="flex z-10">
+        <SearchBar
+          tournamentFilter={searchQuery}
+          setTournamentFilter={setSearchQuery}
+        />
+        <div>
+          <ScrollToTopButton isLgScreen={isLgScreen} />
+        </div>
+      </div>
       <table
         className="relative table-fixed w-full text-center text-xs"
         data-cy="tournament-table"