Make Map companion table header and pagination sticky

Docs/Tasks.md

@@ -74,6 +74,7 @@ When a country is selected the companion table **must** return the complete set
 
 ### TASK-002 — WorldMap: sticky table header and sticky pagination bar
 
+**Status:** Done  
 **Priority:** Low  
 **Domain:** Frontend only  
 **References:** `Docs/Features.md §4`, `Docs/Web-Design.md`, `Docs/Web-Development.md`

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>