commit

docs/sprint-6-12-1-responsive-datatable-review.md

@@ -0,0 +1,54 @@
+# 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.