commit

plans/responsive-datatable-review.md

@@ -0,0 +1,119 @@
+Implement **Sprint 6.12.1 – Global DataTable Responsive Fix**
+
+Goal:
+Fix all DataTable layouts so they never overflow outside the content area.
+
+Problem:
+Training Records page currently overflows horizontally.
+Pagination is partially outside the viewport.
+Some table columns push the layout beyond the available width.
+
+This fix must apply to ALL DataTable pages, including:
+
+- Training Records
+- Pending Review
+- Employee Directory
+- Users
+- Reports
+- Any reusable DataTable component
+
+Requirements:
+
+1. Every page container must use:
+
+```tsx
+className = "flex-1 min-w-0";
+```
+
+2. Every Card containing tables:
+
+```tsx
+overflow - hidden;
+```
+
+3. Every table wrapper:
+
+```tsx
+<div className="w-full overflow-x-auto">
+```
+
+4. Table:
+
+```tsx
+<Table className="min-w-full">
+```
+
+Do not allow page-level overflow.
+
+5. Pagination
+
+Must stay inside container.
+
+Recommended:
+
+```tsx
+flex;
+flex - wrap;
+justify - between;
+items - center;
+gap - 4;
+```
+
+6. Search section
+
+Use
+
+```tsx
+w-full max-w-sm
+```
+
+instead of fixed widths.
+
+7. Certificate column
+
+Use fixed width.
+
+Image
+
+```tsx
+w - 20;
+h - 20;
+object - cover;
+```
+
+8. Mobile
+
+Only table scrolls.
+
+Entire page must never scroll horizontally.
+
+9. Desktop
+
+Table fits inside content container.
+
+10. Audit all pages using reusable DataTable components.
+
+Files likely involved:
+
+- src/components/data-table/\*
+- src/components/ui/table.tsx
+- src/features/training-records/\*
+- src/features/pending-review/\*
+- src/features/users/\*
+- src/features/employee-directory/\*
+- src/features/reports/\*
+- src/components/layout/page-container.tsx
+
+Output Review:
+
+docs/sprint-6-12-1-responsive-datatable-review.md
+
+Include:
+
+- Pages checked
+- Files changed
+- Responsive fixes
+- Overflow fixes
+- Manual regression checklist
+
+Return complete code changes.