local-it/mitgliederverwaltung
2
3
Fork 0
Code Issues 59 Pull requests 2 Projects 2 Releases Packages 1 Activity Actions

feat: sticky memberstable header
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse source
This commit is contained in:
carla 2026-02-25 14:16:43 +01:00
parent 49fd2181a7
commit e5a6003ace
8 changed files with 411 additions and 324 deletions
Download patch file Download diff file Expand all files Collapse all files

5
DESIGN_DUIDELINES.md
View file

@ -272,6 +272,11 @@ Notes:
- **MUST:** Truncate long values consistently (same max widths for name/email-like fields).
- **MUST:** Tooltip reveals full value when truncated.
### 8.5 Loading/Lists/Tables: keep filters visible on desktop
- On **desktop (lg: breakpoint)** only: list pages with large datasets (e.g. Members overview) keep the page header and filter/search bar visible while the user scrolls. Only the table body scrolls inside a constrained area (`lg:max-h-[calc(100vh-<offset>)] lg:overflow-auto`). This preserves context and avoids losing filters when scrolling.
- On **mobile**, sticky headers are not used; the layout uses normal flow (header and table scroll with the page) to preserve vertical space.
- When the table is inside such a scroll container, use the CoreComponents table’s `sticky_header={true}` so the table’s `<thead>` stays sticky within the scroll area on desktop (`lg:sticky lg:top-0`, opaque background `bg-base-100`, z-index). Sticky areas must not overlap content at 200% zoom; focus order must remain header → filters → table.
---
## 9) Flash / Toast messages (mandatory UX)