commit
This commit is contained in:
255
plans/responsive-table-fix.md
Normal file
255
plans/responsive-table-fix.md
Normal file
@@ -0,0 +1,255 @@
|
||||
You are a Senior Frontend Engineer and Responsive UI Specialist.
|
||||
|
||||
Project:
|
||||
Training Management System (TMS)
|
||||
|
||||
Current issue:
|
||||
The table components on these pages exceed the responsive breakpoint and are not mobile/tablet friendly:
|
||||
|
||||
1. /dashboard/pending-review
|
||||
2. /dashboard/training-records
|
||||
3. /dashboard/employees
|
||||
|
||||
Problem:
|
||||
The table width overflows the page layout instead of being contained inside a responsive horizontal scroll area. On smaller breakpoints, table components push the dashboard content width beyond the viewport.
|
||||
|
||||
Current task:
|
||||
Fix table responsiveness for Pending Review, Training Records, and Employees pages.
|
||||
|
||||
Important constraints:
|
||||
|
||||
- Do NOT change database schema.
|
||||
- Do NOT change business logic.
|
||||
- Do NOT remove table columns unless absolutely necessary.
|
||||
- Do NOT rewrite the whole data table system.
|
||||
- Reuse existing DataTable components.
|
||||
- Keep Thai UI.
|
||||
- Keep desktop layout as close as possible.
|
||||
- Fix responsive behavior with minimal-impact changes.
|
||||
|
||||
Pages to inspect and fix:
|
||||
|
||||
- src/app/dashboard/pending-review/page.tsx
|
||||
- src/features/training-records/components/pending-review-table.tsx
|
||||
- src/features/training-records/components/pending-review-columns.tsx
|
||||
- src/app/dashboard/training-records/page.tsx
|
||||
- src/features/training-records/components/training-record-tables/index.tsx
|
||||
- src/features/training-records/components/training-record-tables/columns.tsx
|
||||
- src/app/dashboard/employees/page.tsx
|
||||
- src/features/employees/components/\*
|
||||
- src/components/ui/table/data-table.tsx
|
||||
- src/components/ui/table/data-table-toolbar.tsx
|
||||
- src/components/ui/table/data-table-pagination.tsx
|
||||
- src/components/layout/page-container.tsx
|
||||
|
||||
Root causes to check:
|
||||
|
||||
1. Parent container missing:
|
||||
- min-w-0
|
||||
- max-w-full
|
||||
- overflow-hidden
|
||||
|
||||
2. Table wrapper missing:
|
||||
- w-full
|
||||
- max-w-full
|
||||
- overflow-x-auto
|
||||
|
||||
3. Table itself has fixed/min width too large without scroll container.
|
||||
|
||||
4. Toolbar filters use fixed width and do not wrap.
|
||||
|
||||
5. Pagination uses fixed row layout and overflows.
|
||||
|
||||
6. Table cell content does not truncate/wrap:
|
||||
- long Thai course names
|
||||
- employee names
|
||||
- emails
|
||||
- department names
|
||||
- action buttons
|
||||
|
||||
Required fixes:
|
||||
|
||||
Part 1: Parent layout containment
|
||||
|
||||
Ensure page content wrappers include:
|
||||
|
||||
- min-w-0
|
||||
- max-w-full
|
||||
- overflow-hidden where appropriate
|
||||
|
||||
Example:
|
||||
|
||||
<div className="w-full min-w-0 max-w-full overflow-hidden">
|
||||
|
||||
Part 2: DataTable scroll wrapper
|
||||
|
||||
Ensure DataTable table area is wrapped with:
|
||||
|
||||
<div className="w-full max-w-full overflow-x-auto rounded-md border">
|
||||
<Table className="min-w-[900px] md:min-w-full">
|
||||
...
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
Important:
|
||||
|
||||
- On mobile/tablet, table should scroll horizontally inside its own container.
|
||||
- The whole page must NOT scroll horizontally.
|
||||
|
||||
Part 3: Page-level table cards
|
||||
|
||||
If table is inside Card, Card must have:
|
||||
|
||||
- min-w-0
|
||||
- max-w-full
|
||||
- overflow-hidden
|
||||
|
||||
CardContent should have:
|
||||
|
||||
- min-w-0
|
||||
- max-w-full
|
||||
- overflow-hidden or overflow-x-auto only at table area
|
||||
|
||||
Part 4: Toolbar responsiveness
|
||||
|
||||
DataTableToolbar should:
|
||||
|
||||
- stack on mobile
|
||||
- wrap on tablet
|
||||
- keep desktop inline
|
||||
|
||||
Use:
|
||||
|
||||
- flex flex-col gap-2 md:flex-row md:flex-wrap md:items-center
|
||||
- w-full md:w-auto
|
||||
- min-w-0
|
||||
- search input w-full md:w-[250px]
|
||||
|
||||
Filters/buttons:
|
||||
|
||||
- w-full sm:w-auto
|
||||
- justify-start
|
||||
- flex-wrap
|
||||
|
||||
Part 5: Pagination responsiveness
|
||||
|
||||
DataTablePagination should:
|
||||
|
||||
- stack on mobile
|
||||
- avoid fixed-width overflow
|
||||
- use flex-col gap-2 sm:flex-row
|
||||
- make pagination buttons wrap or remain inside container
|
||||
|
||||
Part 6: Column width strategy
|
||||
|
||||
For table columns:
|
||||
|
||||
Use controlled widths:
|
||||
|
||||
- Course Name: min-w-[220px] max-w-[320px] truncate or line-clamp-2
|
||||
- Employee Name: min-w-[160px]
|
||||
- Email: min-w-[220px] truncate
|
||||
- Department: min-w-[160px]
|
||||
- Status: min-w-[120px]
|
||||
- Actions: sticky right-0 if already supported, or min-w-[100px]
|
||||
|
||||
Do not allow long text to force table beyond intended min width.
|
||||
|
||||
Use:
|
||||
|
||||
- truncate
|
||||
- whitespace-nowrap where appropriate
|
||||
- break-words for Thai long text if better
|
||||
- line-clamp-2 for course name or remark
|
||||
|
||||
Part 7: Action buttons
|
||||
|
||||
Action cells should:
|
||||
|
||||
- not push table width too much
|
||||
- use icon button or compact action dropdown on mobile if existing project supports it
|
||||
|
||||
Part 8: Verify affected pages
|
||||
|
||||
Pending Review:
|
||||
|
||||
- table should scroll within table area
|
||||
- toolbar should not overflow
|
||||
- action buttons still accessible
|
||||
|
||||
Training Records:
|
||||
|
||||
- table should scroll within table area
|
||||
- certificate/status/action columns should remain usable
|
||||
- long course names should not push layout
|
||||
|
||||
Employees:
|
||||
|
||||
- employee code/name/email/department columns should not push layout
|
||||
- email should truncate
|
||||
- action buttons should remain accessible
|
||||
|
||||
Part 9: Browser/responsive validation
|
||||
|
||||
Test visually or by code review at:
|
||||
|
||||
- 360px
|
||||
- 390px
|
||||
- 412px
|
||||
- 768px
|
||||
- 1024px
|
||||
- 1440px
|
||||
|
||||
Expected:
|
||||
|
||||
- No page-level horizontal overflow
|
||||
- Only table container scrolls horizontally
|
||||
- Sidebar/header remain stable
|
||||
- Toolbar wraps cleanly
|
||||
- Pagination stays inside container
|
||||
- Thai text does not break layout
|
||||
|
||||
Part 10: Output review file
|
||||
|
||||
Create:
|
||||
|
||||
docs/responsive-table-fix-review.md
|
||||
|
||||
Include:
|
||||
|
||||
1. Summary
|
||||
2. Root Cause
|
||||
3. Pages Fixed
|
||||
4. Files Changed
|
||||
5. Table Wrapper Changes
|
||||
6. Toolbar Changes
|
||||
7. Pagination Changes
|
||||
8. Column Width Strategy
|
||||
9. Responsive Test Checklist
|
||||
10. Remaining Risks
|
||||
11. Final Responsive Readiness Score
|
||||
|
||||
Manual Test Checklist:
|
||||
|
||||
- Pending Review table no longer breaks page width.
|
||||
- Training Records table no longer breaks page width.
|
||||
- Employees table no longer breaks page width.
|
||||
- Tables scroll horizontally inside their own container.
|
||||
- Page itself does not horizontally scroll.
|
||||
- Toolbar wraps on mobile.
|
||||
- Pagination stays inside container.
|
||||
- Long Thai course names do not push layout.
|
||||
- Long emails truncate correctly.
|
||||
- Action buttons remain accessible.
|
||||
- Works at 360px.
|
||||
- Works at 390px.
|
||||
- Works at 412px.
|
||||
- Works at 768px.
|
||||
- Works at 1024px.
|
||||
- Desktop layout remains acceptable.
|
||||
|
||||
Return:
|
||||
|
||||
- Complete code changes with file paths.
|
||||
- Content of docs/responsive-table-fix-review.md.
|
||||
- Any remaining responsive issues.
|
||||
Reference in New Issue
Block a user