120 lines
1.7 KiB
Markdown
120 lines
1.7 KiB
Markdown
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.
|