135 lines
6.7 KiB
Markdown
135 lines
6.7 KiB
Markdown
# 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
|