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

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.