147 lines
3.3 KiB
Markdown
147 lines
3.3 KiB
Markdown
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.
|