JakeBreath/J621
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Metadata modal: size the preview to the image's own ratio

Browse Source 
The modal preview used a fixed 200px column with object-contain, so wide
images rendered as a slim letterboxed rectangle with dead space. The
preview now sizes naturally (max 320px wide / 55vh tall, aspect ratio
preserved) and the modal column follows it.
This commit is contained in:
JakeBreath
2026-09-17 11:51:04 -05:00
parent a3d1063946
commit d4f5df2e4e
1 changed files with 9 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/features/upload/UploadPage.tsx
+9 -5
View File
@@ -310,24 +310,28 @@ function MetadataModal({
</button> </button>
</div> </div>
<div className="mt-4 grid gap-4 sm:grid-cols-[200px_minmax(0,1fr)]"> <div className="mt-4 grid gap-4 sm:grid-cols-[minmax(0,320px)_minmax(0,1fr)]">
<div className="overflow-hidden rounded-md border border-ctp-surface0 bg-ctp-mantle"> <div className="w-fit max-w-full overflow-hidden rounded-md border border-ctp-surface0 bg-ctp-mantle">
{(temp.preview_url ?? temp.file_url) ? ( {(temp.preview_url ?? temp.file_url) ? (
isVideo ? ( isVideo ? (
<video <video
src={(temp.preview_url ?? temp.file_url) as string} src={(temp.preview_url ?? temp.file_url) as string}
controls controls
muted muted
className="max-h-52 w-full object-contain" className="block h-auto max-h-[55vh] w-auto max-w-full"
/> />
) : ( ) : (
<img <img
src={(temp.preview_url ?? temp.file_url) as string} src={(temp.preview_url ?? temp.file_url) as string}
alt={temp.original_filename} alt={temp.original_filename}
className="max-h-52 w-full object-contain" className="block h-auto max-h-[55vh] w-auto max-w-full"
/> />
) )
) : null} ) : (
<div className="flex h-40 w-40 items-center justify-center text-xs text-ctp-overlay0">
No preview
</div>
)}
</div> </div>
<div className="flex min-w-0 flex-col gap-3"> <div className="flex min-w-0 flex-col gap-3">