You are a Senior Frontend Engineer.

Project:
Training Management System (TMS)

Current task:
Fix certificate preview dialog UI based on UAT/management feedback.

Issue:
The certificate preview modal close button appears too close to the dialog edge or overflows visually.
The certificate image preview also needs better sizing for desktop and mobile.

Important constraints:

- Do NOT change folder structure.
- Do NOT change database schema.
- Do NOT break existing certificate preview/download behavior.
- Reuse existing Dialog / Button / icon components.
- Keep Thai UI.
- Keep responsive/mobile behavior.
- Minimal-impact changes only.

Requirements:

1. Fix close button position in certificate preview dialog.

Current issue:

- Close button appears near or outside the top-right edge.
- It looks visually misaligned.

Expected behavior:

- Close button must stay inside the dialog.
- Close button must be easy to click.
- Close button must not overlap the certificate image.
- Close button must work on desktop and mobile.

2. Add proper dialog header.

Header text:

- ตัวอย่างเกียรติบัตร

Layout:

- Header title on the left
- Close button on the right
- Divider or spacing before preview content

3. Prefer using DialogClose from shadcn/ui.

Example:
<DialogClose asChild>
<Button variant="ghost" size="icon">
<X className="h-4 w-4" />
</Button>
</DialogClose>

4. If the current dialog uses absolute positioning:

- Avoid top-0 right-0
- Use top-4 right-4 only if necessary
- Prefer flex justify-between inside header

5. Fix image preview sizing.

Image requirements:

- Use object-contain
- Width should not overflow dialog
- Height should not exceed viewport
- Recommended:
  - max-h-[70vh]
  - w-full
  - object-contain

6. Fix dialog content sizing.

DialogContent requirements:

- max-w suitable for certificate preview
- max-h-[85vh]
- overflow-y-auto
- padding should not cause overflow
- mobile width should fit screen

Recommended classes:

- w-[calc(100vw-2rem)]
- max-w-3xl
- max-h-[85vh]
- overflow-y-auto

7. Keep certificate fallback behavior.

If file is not an image or image fails:

- Show certificate placeholder icon
- Do not show broken image icon

8. Apply fix to all certificate preview dialogs/components.

Files likely involved:

- src/features/training-records/components/training-record-certificate-manager.tsx
- src/features/training-records/components/training-record-view-page.tsx
- src/features/training-records/components/training-record-tables/columns.tsx
- src/components/ui/dialog.tsx only if shared dialog styling is causing the issue

9. Output Review File

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

Include:

1. Summary
2. Files Changed
3. UI Changes
4. Dialog Behavior
5. Image Sizing
6. Mobile/Responsive Notes
7. Manual Test Checklist
8. Known Limitations

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.

Return:

- Complete code changes with file paths.
- Content of docs/management-change-certificate-dialog-review.md.