commit

plans/change-certificate-dialog.md

@@ -0,0 +1,144 @@
+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.