Update Docs/Tasks.md
This commit is contained in:
@@ -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 `<tr>` elements is unreliable across browsers for table layouts; apply it to each `<th>` (`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.
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user