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 {