From d4f5df2e4e89131447e098527b610d60e3dfdde1 Mon Sep 17 00:00:00 2001
From: JakeBreath <tolozacdcmo@gmail.com>
Date: Thu, 17 Sep 2026 11:51:04 -0500
Subject: [PATCH] Metadata modal: size the preview to the image's own ratio

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.
---
 frontend/src/features/upload/UploadPage.tsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/frontend/src/features/upload/UploadPage.tsx b/frontend/src/features/upload/UploadPage.tsx
index 7e508a8..fd9d664 100644
--- a/frontend/src/features/upload/UploadPage.tsx
+++ b/frontend/src/features/upload/UploadPage.tsx
@@ -310,24 +310,28 @@ function MetadataModal({
           </button>
         </div>
 
-        <div className="mt-4 grid gap-4 sm:grid-cols-[200px_minmax(0,1fr)]">
-          <div className="overflow-hidden rounded-md border border-ctp-surface0 bg-ctp-mantle">
+        <div className="mt-4 grid gap-4 sm:grid-cols-[minmax(0,320px)_minmax(0,1fr)]">
+          <div className="w-fit max-w-full overflow-hidden rounded-md border border-ctp-surface0 bg-ctp-mantle">
             {(temp.preview_url ?? temp.file_url) ? (
               isVideo ? (
                 <video
                   src={(temp.preview_url ?? temp.file_url) as string}
                   controls
                   muted
-                  className="max-h-52 w-full object-contain"
+                  className="block h-auto max-h-[55vh] w-auto max-w-full"
                 />
               ) : (
                 <img
                   src={(temp.preview_url ?? temp.file_url) as string}
                   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 className="flex min-w-0 flex-col gap-3">