alla-tms/plans/responsive-table-fix.md

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:

Part 2: DataTable scroll wrapper

Ensure DataTable table area is wrapped with:

...

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.