diff --git a/Docs/Tasks.md b/Docs/Tasks.md index e6a4eab..8a50e89 100644 --- a/Docs/Tasks.md +++ b/Docs/Tasks.md @@ -71,61 +71,3 @@ When a country is selected the companion table **must** return the complete set - Verify the `ip_filter` SQL clause is parameterised and cannot be injected. --- - -### 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` - -#### Background - -The companion ban table in `MapPage.tsx` is wrapped in `tableWrapper` (CSS `overflow: auto; maxHeight: 420px`). Both the Fluent UI `TableHeader` row and the `.pagination` div inside `tableWrapper` scroll with the content. Once the user scrolls more than a few rows, the column header labels disappear and the pagination controls become unreachable without scrolling back to the top or bottom. - -#### Desired behaviour - -- The column header row (`TableHeader →TableRow → TableHeaderCell × 6`) must remain fixed at the **top** of the scrollable container at all times. -- The pagination / page-size bar (`.pagination` div at the bottom of `tableWrapper`) must remain fixed at the **bottom** of the scrollable container at all times. -- Rows in `TableBody` scroll normally between the two fixed ends. -- No changes to the container height, overall layout, or other pages. - -#### Implementation steps - -All changes are in `frontend/src/pages/MapPage.tsx`. - -1. **Sticky table header cells** - - In `useStyles` (`makeStyles`), add a new class: - ```ts - stickyHeaderCell: { - position: "sticky", - top: 0, - zIndex: 1, - backgroundColor: tokens.colorNeutralBackground1, - boxShadow: `0 1px 0 ${tokens.colorNeutralStroke2}`, - }, - ``` - - Apply `className={styles.stickyHeaderCell}` to **each** `TableHeaderCell` in the header row. - - Note: `position: sticky` on `` elements is unreliable across browsers for table layouts; apply it to each `` (`TableHeaderCell`) instead. - -2. **Sticky pagination bar** - - In the existing `pagination` entry in `useStyles`, add: - ```ts - position: "sticky", - bottom: 0, - zIndex: 1, - ``` - - The existing `backgroundColor: tokens.colorNeutralBackground2` already prevents table rows from bleeding through. - -3. **No other changes** — do not alter `tableWrapper`, its height, or anything outside `MapPage.tsx`. - -#### Testing guidance - -- Load the Map page with a time range that produces > 25 bans (enough to overflow the `420px` container). -- Scroll down through the table and confirm the column headers remain visible at the top. -- Scroll down and confirm the pagination bar remains visible at the bottom. -- Verify no visual artefacts (table body rows must not overlap or bleed through the sticky elements). -- Run `tsc --noEmit` — zero type errors expected. -- Run existing frontend tests: `vitest run` — no regressions. - -