scroll buttons fixed

components/ScrollToTopButton.tsx

@@ -2,12 +2,17 @@
 
 import { FaArrowUp } from "react-icons/fa";
 import { handleScrollToTop } from "@/handlers/scrollHandlers";
+import { useEffect, useRef } from "react";
 
 const ScrollToTopButton = ({ isLgScreen }: { isLgScreen: boolean }) => {
+  const scrollToTopElementRef = useRef<HTMLElement | null>(null);
   // determine scrollable element based on screen size - window or div
-  const scrollToTopElement = isLgScreen
-    ? document.getElementById("tournament-table")
-    : window;
+  useEffect(() => {
+    if (isLgScreen) {
+      scrollToTopElementRef.current =
+        document.getElementById("tournament-table");
+    }
+  }, [isLgScreen]);
 
   const scrollToTopButtonClass = isLgScreen
     ? "absolute bottom-0 right-3 p-10"
@@ -16,8 +21,13 @@ const ScrollToTopButton = ({ isLgScreen }: { isLgScreen: boolean }) => {
   return (
     <button
       className={`${scrollToTopButtonClass} z-10 text-2xl text-teal-900 dark:text-white`}
+      data-cy="scroll-to-top-button"
     >
-      <FaArrowUp onClick={() => handleScrollToTop(scrollToTopElement)} />
+      <FaArrowUp
+        onClick={() =>
+          handleScrollToTop(scrollToTopElementRef.current || window)
+        }
+      />
     </button>
   );
 };

components/TournamentTable.tsx

@@ -75,6 +75,7 @@ export default function TournamentTable({
     <section
       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"
+      data-cy="tournament-table-div"
     >
       <div className="flex z-10">
         <SearchBar