# 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