alla-tms/plans/change-certificate-dialog.md

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:

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.