alla-tms/docs/responsive-qa-after-management-change-review.md

Responsive QA After Management Change Review

1. Summary

รอบนี้เป็นการเก็บงาน responsive หลัง management UI changes โดยโฟกัสที่จุดเสี่ยงล้นหน้าจอจาก navigation, header, dropdown/popover, filter toolbar, report filters, course selection, และ announcement detail

ไม่ได้เพิ่ม business feature ใหม่ และไม่ได้แก้ database schema หรือรื้อ layout หลักของระบบ

2. Screens Tested

เป้าหมาย breakpoint ที่ใช้ตรวจรอบนี้:

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

หมายเหตุ:

• ใน session นี้ in-app browser ใช้งานไม่ได้ จึงเป็นการทำ responsive QA เชิงโค้ดและ layout constraints ตาม breakpoint เป้าหมาย
• แนะนำให้ทำ visual regression/manual pass ซ้ำใน Chrome และ Edge หลัง pull งานนี้

3. Pages Reviewed

Employee:

• /dashboard/overview
• /dashboard/training-records
• /dashboard/training-records/create
• /dashboard/training-records/[id]
• /dashboard/announcements
• /dashboard/announcements/[id]
• /dashboard/notifications

HRD/Admin:

• /dashboard/overview
• /dashboard/pending-review
• /dashboard/training-records
• /dashboard/training-records/[id]/review
• /dashboard/courses
• /dashboard/training-policy
• /dashboard/import-employees
• /dashboard/announcements
• /dashboard/reports
• /dashboard/audit-logs

4. Issues Found

• Header area มีโอกาสล้นบน mobile เมื่อ breadcrumb ยาวและมี notification bell อยู่ฝั่งขวา
• Breadcrumb item ล่าสุดมีโอกาสดัน layout ถ้าชื่อหน้ายาว
• User dropdown มีโอกาสกว้างเกิน viewport บน mobile และ email อาจล้น
• Notification popover มีโอกาสล้น width บนหน้าจอเล็ก และ header ภายใน popover wrap ไม่ดี
• Course select popover มีโอกาสกว้างเกินหน้าจอ และชื่อหลักสูตรยาวอาจดัน layout
• Data table toolbar filters บางช่องไม่มี min-w-0 ทำให้ wrap ได้ไม่ดี
• Reports filter area เสี่ยงล้นเมื่อ select หลายช่องและปุ่ม export อยู่ร่วมกัน
• Announcement detail attachment button ยังไม่ friendly กับ mobile width
• Page heading ขนาดใหญ่และไม่ wrap ในบางหน้า

5. Issues Fixed

• ปรับ header ให้ min-w-0 และลดแรงกดของ breadcrumb บน mobile
• ปรับ breadcrumb list และ current page ให้ truncate ได้
• ปรับ user dropdown ให้มี max-width ตาม viewport และให้ email break-all
• ปรับ notification popover ให้ width ไม่เกินจอและ header ภายใน wrap ได้
• ปรับ course select trigger/content ให้ไม่เกิน viewport และ truncate รายการยาว
• เพิ่ม min-w-0 ให้ table toolbar inputs เพื่อช่วยการ wrap บน mobile
• ปรับ overview/reports filter sections ให้ label/action area wrap ได้สะอาดขึ้น
• ปรับ announcement attachment action ให้ใช้งานเต็มความกว้างบน mobile
• ปรับ page heading ให้ responsive ขึ้นและ wrap ได้

6. Files Changed

• src/components/layout/header.tsx
• src/components/breadcrumbs.tsx
• src/components/layout/user-nav.tsx
• src/components/ui/heading.tsx
• src/components/ui/table/data-table-toolbar.tsx
• src/features/notifications/components/notification-center.tsx
• src/features/notifications/components/notifications-page.tsx
• src/features/training-records/components/training-record-course-combobox.tsx
• src/features/overview/components/overview-filter-panel.tsx
• src/features/reports/components/reports-page-content.tsx
• src/features/reports/components/report-table-card.tsx
• src/features/announcements/components/announcement-view-page.tsx

7. Responsive Patterns Applied

• min-w-0 กับ container ที่มีข้อความไทยยาว
• truncate กับ breadcrumb และ select option labels
• break-all สำหรับ email ใน user dropdown
• max-w-[calc(100vw-...)] กับ dropdown/popover/select content
• w-full sm:w-auto สำหรับ action button บน mobile
• flex-wrap ใน header/popover/filter action groups
• text-2xl sm:text-3xl สำหรับ page heading

8. Remaining Risks

• ยังไม่ได้ทำ visual click-through automation ใน Chrome/Edge จริงใน session นี้ เพราะ browser automation surface ไม่พร้อมใช้งาน
• Route access ของ employee ไปหน้า reports โดย URL ตรงควรตรวจ policy อีกครั้ง หากต้องการ “เข้าไม่ได้” ไม่ใช่แค่ “ไม่เห็นเมนู”
• บางข้อความไทยใน repo ยังมี encoding เพี้ยนใน source output/terminal แม้ไม่กระทบ layout โดยตรง แต่ควร cleanup แยกต่างหาก

9. 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

10. Responsive Readiness Score

8/10

เหตุผล:

• จุดล้นที่เสี่ยงที่สุดหลัง management change ถูกเก็บแล้ว
• desktop layout เดิมยังถูกคงไว้
• ยังควรมี browser-based QA pass จริงอีก 1 รอบก่อนปิดงาน UAT