alla-tms/plans/responsive.md

You are a Senior Frontend Engineer.

Project: Training Management System (TMS)

Current task: Before Sprint 6, audit and fix responsive layout issues across the TMS system.

Important constraints:

• Do NOT change folder structure.
• Do NOT rewrite layout from scratch.
• Do NOT break existing desktop UI.
• Reuse existing sidebar, header, layout, shadcn/ui and Tailwind classes.
• Keep Thai UI.
• Minimal-impact changes only.

Goal: Make the current TMS pages usable on:

• Desktop
• Tablet
• Mobile

Breakpoints:

• Mobile: 360px - 767px
• Tablet: 768px - 1023px
• Desktop: 1024px+

Pages to audit:

1. /dashboard/overview
2. /dashboard/training-records
3. /dashboard/training-records/[id]
4. /dashboard/training-records/[id]/review
5. /dashboard/pending-review
6. /dashboard/courses
7. /dashboard/training-policy
8. /dashboard/import-employees
9. /dashboard/master-review
10. /dashboard/reports

Responsive requirements:

1. Main layout

• Sidebar must collapse or become mobile drawer on small screens.
• Header must not overflow.
• User menu and search must remain usable.
• Page content must have proper padding on mobile.

2. Tables

• Tables must support horizontal scroll on mobile.
• No table should break page width.
• Important actions must remain accessible.
• Add responsive wrappers where needed: overflow-x-auto min-w-[...] for wide tables

3. Cards and dashboard

• Card grids must change from: desktop: 3-4 columns tablet: 2 columns mobile: 1 column
• Charts must not overflow.
• Dashboard widgets must stack vertically on mobile.

4. Forms

• Forms must become single column on mobile.
• Buttons must stack or become full width on mobile.
• Inputs, selects, date pickers, file upload must fit screen width.

5. Dialogs / Modals

• Dialog width must fit mobile screens.
• Long content must scroll.
• Action buttons must remain visible.

6. Data table toolbar

• Filters must wrap on mobile.
• Search input must be full width on mobile.
• Export / action buttons must not overflow.

7. Thai text

• Long Thai labels must wrap correctly.
• Badges must not overflow.
• Table cells should use truncate or wrap where appropriate.

Implementation guidance:

• Prefer Tailwind responsive classes.
• Use: w-full max-w-full overflow-x-auto grid-cols-1 md:grid-cols-2 lg:grid-cols-4 flex-col md:flex-row gap-3 px-4 md:px-6 text-sm md:text-base
• Avoid fixed widths unless necessary.
• Replace hardcoded widths with responsive widths.

Output review file: Create:

docs/pre-sprint-6-responsive-audit-review.md

The file must include:

1. Summary
2. Files changed
3. Pages audited
4. Responsive issues found
5. Responsive issues fixed
6. Components updated
7. Breakpoints tested
8. Manual test checklist
9. Remaining limitations
10. Recommendation before Sprint 6

Manual test checklist:

• Desktop layout still works.
• Sidebar works on desktop.
• Sidebar/drawer works on mobile.
• Dashboard cards stack correctly on mobile.
• Tables scroll horizontally on mobile.
• Forms fit mobile width.
• Buttons are usable on mobile.
• Dialogs fit mobile width.
• No horizontal page overflow except intended table scroll.
• Thai labels do not break layout.
• HRD pages work on tablet.
• Employee pages work on mobile.

Return:

• Complete code changes with file paths.
• Content of docs/pre-sprint-6-responsive-audit-review.md.