Make Map companion table header and pagination sticky

frontend/src/pages/MapPage.tsx

@@ -64,6 +64,13 @@ const useStyles = makeStyles({
     borderRadius: tokens.borderRadiusMedium,
     border: `1px solid ${tokens.colorNeutralStroke1}`,
   },
+  stickyHeaderCell: {
+    position: "sticky",
+    top: 0,
+    zIndex: 1,
+    backgroundColor: tokens.colorNeutralBackground1,
+    boxShadow: `0 1px 0 ${tokens.colorNeutralStroke2}`,
+  },
   filterBar: {
     display: "flex",
     alignItems: "center",
@@ -81,6 +88,9 @@ const useStyles = makeStyles({
     padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalM}`,
     borderTop: `1px solid ${tokens.colorNeutralStroke2}`,
     backgroundColor: tokens.colorNeutralBackground2,
+    position: "sticky",
+    bottom: 0,
+    zIndex: 1,
   },
 });
 
@@ -248,12 +258,12 @@ export function MapPage(): React.JSX.Element {
           <Table size="small" aria-label="Bans list">
             <TableHeader>
               <TableRow>
-                <TableHeaderCell>IP Address</TableHeaderCell>
-                <TableHeaderCell>Jail</TableHeaderCell>
-                <TableHeaderCell>Banned At</TableHeaderCell>
-                <TableHeaderCell>Country</TableHeaderCell>
-                <TableHeaderCell>Origin</TableHeaderCell>
-                <TableHeaderCell>Times Banned</TableHeaderCell>
+                <TableHeaderCell className={styles.stickyHeaderCell}>IP Address</TableHeaderCell>
+                <TableHeaderCell className={styles.stickyHeaderCell}>Jail</TableHeaderCell>
+                <TableHeaderCell className={styles.stickyHeaderCell}>Banned At</TableHeaderCell>
+                <TableHeaderCell className={styles.stickyHeaderCell}>Country</TableHeaderCell>
+                <TableHeaderCell className={styles.stickyHeaderCell}>Origin</TableHeaderCell>
+                <TableHeaderCell className={styles.stickyHeaderCell}>Times Banned</TableHeaderCell>
               </TableRow>
             </TableHeader>
             <TableBody>