From f1e3d4c4c93870c0d6701644b22403744d7e5ae8 Mon Sep 17 00:00:00 2001
From: Lukas <lukas.pupkalipinski@lpl-mind.de>
Date: Sun, 5 Apr 2026 22:17:24 +0200
Subject: [PATCH] Make Map companion table header and pagination sticky

---
 Docs/Tasks.md                  |  1 +
 frontend/src/pages/MapPage.tsx | 22 ++++++++++++++++------
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/Docs/Tasks.md b/Docs/Tasks.md
index 4b1cbfa..e6a4eab 100644
--- a/Docs/Tasks.md
+++ b/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`
diff --git a/frontend/src/pages/MapPage.tsx b/frontend/src/pages/MapPage.tsx
index 2b796ff..4cf0c2e 100644
--- a/frontend/src/pages/MapPage.tsx
+++ b/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>