commit

plans/responsive.md

@@ -0,0 +1,146 @@
+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.