commit

docs/management-change-certificate-dialog-review.md

@@ -0,0 +1,58 @@
+# Certificate Dialog Review
+
+## Summary
+
+ปรับปรุงหน้าต่างแสดงตัวอย่างเกียรติบัตรให้ปุ่มปิดอยู่ในตำแหน่งที่เหมาะสมภายใน dialog และทำให้การแสดงผลรูปภาพมีขนาดที่พอดีกับทั้ง desktop และ mobile โดยไม่กระทบพฤติกรรม preview/fallback และการเปิดไฟล์เดิม
+
+## Files Changed
+
+- `src/components/ui/dialog.tsx`
+- `src/features/training-records/components/training-record-tables/training-record-image-preview.tsx`
+
+## UI Changes
+
+- เพิ่มความสามารถ `hideCloseButton` ให้ `DialogContent` เพื่อซ่อนปุ่มปิดแบบ default ในกรณีที่ต้องการจัด header เอง
+- เพิ่ม header แบบมองเห็นได้ใน dialog preview
+  - ซ้าย: หัวข้อ `ตัวอย่างเกียรติบัตร`
+  - ขวา: ปุ่มปิดแบบ `DialogClose` + `Button`
+- เพิ่มเส้นแบ่ง (`border-b`) ระหว่าง header และเนื้อหา preview
+
+## Dialog Behavior
+
+- ปุ่มปิดอยู่ภายในกรอบ dialog เสมอ
+- ปุ่มปิดไม่ลอยทับรูปภาพ
+- ปุ่มปิดใช้ `DialogClose asChild` ตาม pattern ของ shadcn/ui
+- dialog ยังคงเปิดจาก thumbnail เดิม และยังรองรับ fallback placeholder เหมือนเดิม
+
+## Image Sizing
+
+- เปลี่ยนพื้นที่ preview หลักให้ใช้ `object-contain`
+- จำกัดขนาดรูปด้วย `max-h-[70vh]`
+- ให้รูปใช้ `w-full` ภายใน dialog โดยไม่ล้นกรอบ
+- dialog ใช้ขนาด `w-[calc(100vw-2rem)]` และ `max-w-3xl` เพื่อให้พอดีกับหน้าจอ
+
+## Mobile/Responsive Notes
+
+- dialog ใช้ความกว้างแบบ responsive เพื่อไม่ชนขอบจอมือถือ
+- header ใช้งานง่ายบนหน้าจอเล็ก เพราะปุ่มปิดอยู่ในแถวเดียวกับหัวข้อ
+- เนื้อหาใช้ `overflow-y-auto` เพื่อรองรับกรณีความสูงไม่พอ
+- placeholder non-image และ broken-image ยังแสดงได้เต็มพื้นที่โดยไม่แตก layout
+
+## Manual Test Checklist
+
+- Certificate preview dialog opens correctly.
+- Close button stays inside dialog.
+- Close button does not overlap image.
+- Close button works on desktop.
+- Close button works on mobile.
+- Large landscape certificate fits inside dialog.
+- Portrait certificate fits inside dialog.
+- Image does not overflow screen.
+- PDF or unsupported file shows certificate placeholder icon.
+- Broken image shows certificate placeholder icon.
+- Download/open certificate still works.
+
+## Known Limitations
+
+- งานนี้ปรับเฉพาะ dialog ของ certificate preview component ที่ใช้งานอยู่ในโมดูล training records
+- ถ้าภายหลังมี preview dialog แบบใหม่ที่ไม่ใช้ component เดียวกัน จะต้องนำ pattern นี้ไปใช้เพิ่มแยกจุด