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

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 นี้ไปใช้เพิ่มแยกจุด