alla-tms/plans/responsive-qa-after-management-change.md

You are a Senior Frontend QA Engineer.

Project: Training Management System (TMS)

Current task: Perform responsive QA after management UI changes.

Important constraints:

• Do NOT add new business features.
• Do NOT change database schema.
• Do NOT rewrite layout from scratch.
• Fix only responsive/UI issues found.
• Keep Thai UI.
• Keep existing desktop layout working.
• Minimal-impact changes only.

Screen sizes to test:

• 360px
• 390px
• 412px
• 768px
• 1024px
• 1440px

Browsers:

• Chrome
• Microsoft Edge

Pages to test:

Employee:

1. /dashboard/overview
2. /dashboard/training-records
3. /dashboard/training-records/create
4. /dashboard/training-records/[id]
5. /dashboard/announcements
6. /dashboard/announcements/[id]
7. /dashboard/notifications

HRD/Admin:

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

Focus areas:

1. Sidebar / Navigation

• Employee sidebar must not show Reports.
• Employee sidebar must not show Announcements if announcements are moved to dashboard.
• Employee sidebar must not show Notifications if notification is moved to bell icon.
• HRD/Admin sidebar must not show Organizations.
• HRD/Admin sidebar must not show Master Review.
• Sidebar drawer works on mobile.
• Sidebar closes after menu selection on mobile.
• Menu labels do not overflow.

2. Header

• Notification bell is visible on desktop and mobile.
• Notification badge does not overflow.
• User dropdown displays:
  • name
  • employee code
  • email
• Profile menu is removed.
• User dropdown does not overflow mobile screen.

3. Dashboard

• Compact filter toolbar does not overflow.
• Filter controls wrap correctly on mobile.
• Announcement widget displays correctly on employee dashboard.
• KPI cards stack correctly.
• Charts do not overflow.
• Thai text wraps correctly.

4. Training Record Form

• Course dropdown fits mobile screen.
• "อื่น ๆ" option works without layout breaking.
• Custom course text input fits mobile screen.
• Training type dropdown with new 4 options fits mobile screen.
• TimePicker for training hours fits mobile screen.
• Date picker fits mobile screen.
• File upload area fits mobile screen.
• Submit/cancel buttons are usable on mobile.

5. Certificate Preview

• Image preview fits dialog.
• Close button stays inside dialog.
• Unsupported files show certificate icon.
• Broken images show certificate icon.
• Download/open action works.
• Dialog does not overflow on 360px.

6. Tables

• Tables scroll horizontally where needed.
• Table toolbar filters wrap correctly.
• Pagination works on mobile.
• Action buttons remain accessible.
• No table breaks page width.

7. Dialogs / Popovers

• Notification popover fits mobile.
• User dropdown fits mobile.
• Certificate dialog fits mobile.
• Review dialog fits mobile.
• Course dropdown/select popover fits mobile.

8. Reports

• HRD reports filter area fits mobile.
• Export buttons stack correctly.
• Report tables scroll horizontally.
• Employee cannot access reports.

9. Error / Loading / Empty States

• Loading skeleton does not overflow.
• Error pages are readable on mobile.
• Empty states are centered/clean.

Required fixes:

• Add max-w-full where needed.
• Add overflow-x-auto to wide tables.
• Use flex-col md:flex-row where controls overflow.
• Use w-full on mobile buttons/inputs.
• Use min-w-0 for long Thai text containers.
• Use truncate or break-words where appropriate.
• Keep desktop layout unchanged as much as possible.

Output Review File:

Create: docs/responsive-qa-after-management-change-review.md

Include:

1. Summary
2. Screens Tested
3. Pages Reviewed
4. Issues Found
5. Issues Fixed
6. Files Changed
7. Responsive Patterns Applied
8. Remaining Risks
9. Manual Test Checklist
10. Responsive Readiness Score

Manual Test Checklist:

• 360px layout works.
• 390px layout works.
• 412px layout works.
• 768px layout works.
• 1024px layout works.
• 1440px layout works.
• Employee menu is correct.
• HRD/Admin menu is correct.
• Header bell works.
• User dropdown works.
• Dashboard filter does not overflow.
• Course dropdown works on mobile.
• Other course input works on mobile.
• TimePicker works on mobile.
• Certificate dialog works on mobile.
• Tables scroll correctly.
• Reports are HRD only.
• Thai text does not break layout.

Return:

• Complete code changes with file paths.
• Content of docs/responsive-qa-after-management-change-review.md.
• Remaining issues if any.