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

@@ -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">