From 774eba2a0f88f7a1e8c54b4ca728aa7d87ef1fa1 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Fri, 23 Feb 2024 07:34:14 -0600
Subject: [PATCH] scroll to top with new events

---
 web/src/views/events/DesktopEventView.tsx | 41 ++++++++++++++++-------
 1 file changed, 28 insertions(+), 13 deletions(-)

diff --git a/web/src/views/events/DesktopEventView.tsx b/web/src/views/events/DesktopEventView.tsx
index de1076196..f00bff557 100644
--- a/web/src/views/events/DesktopEventView.tsx
+++ b/web/src/views/events/DesktopEventView.tsx
@@ -252,19 +252,34 @@ export default function DesktopEventView({
           ref={contentRef}
           className="flex flex-1 flex-wrap content-start gap-2 overflow-y-auto no-scrollbar"
         >
-          <Button
-            className={`${
-              hasUpdate ? "animate-in slide-in-from-top" : "invisible"
-            } absolute text-center left-1/2 transform mt-5 z-30 bg-gray-400 text-white`}
-            variant="secondary"
-            onClick={() => {
-              setHasUpdate(false);
-              pullLatestData();
-            }}
-          >
-            <LuRefreshCcw className="w-4 h-4 mr-2" />
-            New Items To Review
-          </Button>
+          {hasUpdate && (
+            <div className="absolute w-full z-30">
+              <div className="flex justify-center items-center mr-[100px]">
+                <Button
+                  className={`${
+                    hasUpdate
+                      ? "animate-in slide-in-from-top duration-500"
+                      : "invisible"
+                  }  text-center mt-5 mx-auto bg-gray-400 text-white`}
+                  variant="secondary"
+                  onClick={() => {
+                    setHasUpdate(false);
+                    pullLatestData();
+                    if (contentRef.current) {
+                      contentRef.current.scrollTo({
+                        top: 0,
+                        behavior: "smooth",
+                      });
+                    }
+                  }}
+                >
+                  <LuRefreshCcw className="w-4 h-4 mr-2" />
+                  New Items To Review
+                </Button>
+              </div>
+            </div>
+          )}
+
           <div className="w-full mr-4 md:grid md:grid-cols-3 3xl:grid-cols-4 gap-4 overflow-y-auto no-scrollbar">
             {currentItems ? (
               currentItems.map((value, segIdx) => {