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