Fix scroll position not resetting between routes (#2672)

Author: Giolii

client/src/Routes.jsx

@@ -11,6 +11,7 @@ import { useWidget } from "./appReducer";
 import useFeatureFlag from "./hooks/useFeatureFlag";
 import SurveySnackbar from "./components/UI/SurveySnackbar";
 import AnnouncementSnackbar from "components/UI/AnnouncementSnackbar";
+import ScrollToTop from "./components/ScrollToTop";
 
 const VerificationAdmin = lazy(() =>
   import("components/Admin/VerificationAdmin")
@@ -241,6 +242,7 @@ function AppWrapper() {
       wrap="nowrap"
       alignContent="stretch"
       spacing={0}
+      id="app-container"
       sx={{
         color: "black",
         backgroundColor: "#fff",
@@ -249,6 +251,7 @@ function AppWrapper() {
         overflowX: "hidden",
       }}
     >
+      <ScrollToTop />
       {isAlertLocation && <AnnouncementSnackbar />}
 
       {isWidget ? null : <Header />}

client/src/components/ScrollToTop.jsx

@@ -0,0 +1,19 @@
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+
+export default function ScrollToTop() {
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    // Scroll the window
+    window.scrollTo(0, 0);
+
+    // Scroll the app container (Grid with fixed height)
+    const appContainer = document.getElementById("app-container");
+    if (appContainer) {
+      appContainer.scrollTop = 0;
+    }
+  }, [pathname]);
+
+  return null;
+}