chore: scroll to the top of table when changing page (#10657)

Makes it so that if you change the page in a paginated table, you'll
scroll to the top of the table. Makes the experience more user friendly.

Will only scroll if the top of the table isn't in view already.

Also scrolls to the top of the table when you change the page size
unless: you are on the first page **and** increasing the page size.

The reason for this behavior is:
- we already send you back to page 1 if you change the page size (so it
makes sense to also scroll you to the top)
- if you're increasing the page size because you're at the bottom of the
table, you probably wanna keep your place
- if you're decreasing the page size, you might be below where the
actual table cuts off, so you'll end up at the bottom of the table (or
below the table completely if that's possible on that page)

frontend/src/component/common/Table/PaginatedTable/PaginatedTable.tsx

@@ -1,4 +1,5 @@
 import { TableBody, TableRow, TableHead } from '@mui/material';
+import { useRef } from 'react';
 import { Table } from 'component/common/Table/Table/Table';
 import {
     type Header,
@@ -59,10 +60,22 @@ export const PaginatedTable = <T extends object>({
     totalItems?: number;
 }) => {
     const { pagination } = tableInstance.getState();
+    const tableRef = useRef<HTMLDivElement>(null);
+
+    const scrollToTopIfNeeded = () => {
+        if (!tableRef.current) return;
+
+        const rect = tableRef.current.getBoundingClientRect();
+        const isTableTopVisible = rect.top >= 0;
+
+        if (!isTableTopVisible) {
+            tableRef.current.scrollIntoView({ block: 'start' });
+        }
+    };
 
     return (
         <>
-            <TableContainer>
+            <TableContainer ref={tableRef}>
                 <Table>
                     <TableHead>
                         {tableInstance.getHeaderGroups().map((headerGroup) => (
@@ -110,24 +123,35 @@ export const PaginatedTable = <T extends object>({
                         totalItems={totalItems}
                         pageIndex={pagination.pageIndex}
                         pageSize={pagination.pageSize}
-                        fetchNextPage={() =>
+                        fetchNextPage={() => {
                             tableInstance.setPagination({
                                 pageIndex: pagination.pageIndex + 1,
                                 pageSize: pagination.pageSize,
-                            })
+                            });
-                        }
+                            scrollToTopIfNeeded();
-                        fetchPrevPage={() =>
+                        }}
+                        fetchPrevPage={() => {
                             tableInstance.setPagination({
                                 pageIndex: pagination.pageIndex - 1,
                                 pageSize: pagination.pageSize,
-                            })
+                            });
-                        }
+                            scrollToTopIfNeeded();
-                        setPageLimit={(pageSize) =>
+                        }}
+                        setPageLimit={(pageSize) => {
                             tableInstance.setPagination({
                                 pageIndex: 0,
                                 pageSize,
-                            })
+                            });
-                        }
+
+                            if (
+                                pagination.pageIndex > 0 ||
+                                pagination.pageSize > pageSize
+                            ) {
+                                // scroll to table top unless you are on the
+                                // first page and increasing the page size.
+                                scrollToTopIfNeeded();
+                            }
+                        }}
                     />
                 }
             />