From 1be7200bca2490b08835a94f5cc8e0edc7bea61f Mon Sep 17 00:00:00 2001
From: Harman-singh-waraich <Waraichharman68@gmail.com>
Date: Tue, 4 Feb 2025 21:07:44 +0530
Subject: [PATCH 1/2] refactor(web): jurors-page-scroll

---
 web/src/hooks/useScrollTop.ts          | 7 +++++--
 web/src/pages/Jurors/DisplayJurors.tsx | 3 +++
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/web/src/hooks/useScrollTop.ts b/web/src/hooks/useScrollTop.ts
index 216a42901..87108fd3d 100644
--- a/web/src/hooks/useScrollTop.ts
+++ b/web/src/hooks/useScrollTop.ts
@@ -4,8 +4,11 @@ import { OverlayScrollContext } from "context/OverlayScrollContext";
 export const useScrollTop = () => {
   const osInstanceRef = useContext(OverlayScrollContext);
 
-  const scrollTop = () => {
-    osInstanceRef?.current?.osInstance().elements().viewport.scroll({ top: 0 });
+  const scrollTop = (smooth = false) => {
+    osInstanceRef?.current
+      ?.osInstance()
+      .elements()
+      .viewport.scroll({ top: 0, behavior: smooth ? "smooth" : "auto" });
   };
 
   return scrollTop;
diff --git a/web/src/pages/Jurors/DisplayJurors.tsx b/web/src/pages/Jurors/DisplayJurors.tsx
index 2bc46cfa9..9208c0c7b 100644
--- a/web/src/pages/Jurors/DisplayJurors.tsx
+++ b/web/src/pages/Jurors/DisplayJurors.tsx
@@ -15,6 +15,7 @@ import JurorCard from "../Home/TopJurors/JurorCard";
 import { ListContainer, StyledLabel } from "../Home/TopJurors";
 import Header from "../Home/TopJurors/Header";
 import { decodeURIFilter } from "utils/uri";
+import { useScrollTop } from "hooks/useScrollTop";
 
 interface IDisplayJurors {
   totalLeaderboardJurors: number;
@@ -28,6 +29,7 @@ const StyledPagination = styled(StandardPagination)`
 
 const DisplayJurors: React.FC<IDisplayJurors> = ({ totalLeaderboardJurors }) => {
   const { page, order, filter } = useParams();
+  const scrollTop = useScrollTop();
   const { id: searchValue } = decodeURIFilter(filter ?? "all");
   const navigate = useNavigate();
   const isDesktop = useIsDesktop();
@@ -62,6 +64,7 @@ const DisplayJurors: React.FC<IDisplayJurors> = ({ totalLeaderboardJurors }) =>
   );
 
   const handlePageChange = (newPage: number) => {
+    scrollTop(true);
     navigate(`/jurors/${newPage}/${order}/${filter}`);
   };
 

From 642d2a22347c73bdc5fef9d285345c8e56760e89 Mon Sep 17 00:00:00 2001
From: Harman-singh-waraich <Waraichharman68@gmail.com>
Date: Tue, 4 Feb 2025 22:26:44 +0530
Subject: [PATCH 2/2] refactor(web): juror-per-page-to-10

---
 web/src/pages/Jurors/DisplayJurors.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/web/src/pages/Jurors/DisplayJurors.tsx b/web/src/pages/Jurors/DisplayJurors.tsx
index 9208c0c7b..6e3c56596 100644
--- a/web/src/pages/Jurors/DisplayJurors.tsx
+++ b/web/src/pages/Jurors/DisplayJurors.tsx
@@ -6,7 +6,6 @@ import { isUndefined } from "utils/index";
 import { StandardPagination } from "@kleros/ui-components-library";
 
 import { useJurorsByCoherenceScore } from "queries/useJurorsByCoherenceScore";
-import useIsDesktop from "hooks/useIsDesktop";
 
 import { OrderDirection } from "src/graphql/graphql";
 
@@ -32,8 +31,7 @@ const DisplayJurors: React.FC<IDisplayJurors> = ({ totalLeaderboardJurors }) =>
   const scrollTop = useScrollTop();
   const { id: searchValue } = decodeURIFilter(filter ?? "all");
   const navigate = useNavigate();
-  const isDesktop = useIsDesktop();
-  const jurorsPerPage = isDesktop ? 20 : 10;
+  const jurorsPerPage = 10;
   const currentPage = parseInt(page ?? "1");
   const jurorSkip = jurorsPerPage * (currentPage - 1);
   const { data: queryJurors } = useJurorsByCoherenceScore(