55 lines
2.5 KiB
Markdown
55 lines
2.5 KiB
Markdown
# Sprint 6.12.1 Responsive DataTable Review
|
|
|
|
## Pages checked
|
|
|
|
- Training Records
|
|
- Pending Review
|
|
- Employee Directory
|
|
- Users
|
|
- Reports
|
|
- Shared reusable DataTable consumers
|
|
- Audit Logs
|
|
- Courses
|
|
- Employees
|
|
- Training Matrix
|
|
|
|
## Files changed
|
|
|
|
- `src/components/layout/page-container.tsx`
|
|
- `src/components/ui/table.tsx`
|
|
- `src/components/ui/table/data-table.tsx`
|
|
- `src/components/ui/table/data-table-pagination.tsx`
|
|
- `src/components/ui/table/data-table-toolbar.tsx`
|
|
- `src/features/employee-directory/components/employee-directory-toolbar.tsx`
|
|
- `src/features/training-records/components/training-record-tables/columns.tsx`
|
|
- `src/features/training-records/components/training-record-tables/training-record-image-preview.tsx`
|
|
- `src/features/reports/components/report-table-card.tsx`
|
|
|
|
## Responsive fixes
|
|
|
|
- Kept the page shell anchored with `flex-1 min-w-0` so child table layouts can shrink inside the content area.
|
|
- Moved shared DataTable scrolling to a native `w-full overflow-x-auto` wrapper so only the table region scrolls horizontally.
|
|
- Standardized table sizing around `Table className="min-w-full"` in shared DataTable and report tables.
|
|
- Updated shared toolbar text filters to use `w-full max-w-sm` instead of fixed responsive widths.
|
|
- Updated Employee Directory search input to use `w-full max-w-sm`.
|
|
- Updated pagination layout to wrap and stay inside its container on narrow screens.
|
|
|
|
## Overflow fixes
|
|
|
|
- Added `overflow-hidden` protection to report table cards.
|
|
- Prevented page-level overflow by keeping DataTable containers `min-w-0 max-w-full overflow-hidden`.
|
|
- Reduced forced table expansion by removing global `whitespace-nowrap` from table cells.
|
|
- Fixed Training Records certificate preview column to a stable `w-20 h-20` footprint so it does not push the table wider than necessary.
|
|
|
|
## Manual regression checklist
|
|
|
|
- Verify the dashboard page itself does not scroll horizontally on mobile widths.
|
|
- Verify only the table region scrolls horizontally when columns exceed available width.
|
|
- Verify Training Records pagination remains fully visible at small widths.
|
|
- Verify Pending Review filters and pagination stay inside the card/container.
|
|
- Verify Employee Directory search and filters wrap cleanly without clipping.
|
|
- Verify Users table and pagination stay inside the content area.
|
|
- Verify Reports table cards scroll only inside the table wrapper.
|
|
- Verify pinned action columns still render correctly after shared DataTable wrapper changes.
|
|
- Verify certificate previews still open the dialog and render thumbnail images correctly.
|