145 lines
3.4 KiB
Markdown
145 lines
3.4 KiB
Markdown
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.
|