[ui] fix audio preview sizing, rework detail mode, height

webui/src/components/BrowseColumn.svelte

@@ -53,7 +53,6 @@
     editable={editable || false}
     {index}
     {detail}
-    --preview-height={detail ? "50vh" : "20em"}
     on:resolved
   />
 </div>

webui/src/components/display/BlobPreview.svelte

@@ -33,7 +33,7 @@
 </script>
 
 {#if handled}
-  <div class="preview">
+  <div class="preview" class:detail>
     {#if text}
       <div class="text">
         <TextViewer {address} />
@@ -72,9 +72,7 @@
       {/if}
     {/if}
     {#if image}
-      <div class="image">
-        <ImageViewer {address} {editable} {detail} />
-      </div>
+      <ImageViewer {address} {editable} {detail} />
     {/if}
     {#if pdf}
       <iframe
@@ -105,19 +103,23 @@
     justify-content: center;
     align-items: center;
     flex-direction: column;
+    max-height: 25em;
+
+    &.detail {
+      max-height: 50vh;
+    }
   }
 
   audio,
   video,
+  img,
   .image,
   .text {
     width: 100%;
-    height: var(--preview-height, 25em);
   }
 
   iframe {
     width: 100%;
-    min-height: var(--preview-height, 25em);
   }
 
   .text {

webui/src/components/display/blobs/ImageViewer.svelte

@@ -196,15 +196,22 @@
   @use "@recogito/annotorious/dist/annotorious.min.css";
 
   .image-viewer {
-    height: 100%;
-    text-align: center;
+    display: flex;
+    min-height: 0;
+
     & > *,
     img {
+      min-width: 0;
       max-width: 100%;
-      max-height: var(--preview-height);
+      min-height: 0;
+      max-height: 100%;
     }
   }
 
+  .preview-image {
+    margin: auto;
+  }
+
   .r6o-editor {
     font-family: inherit;
   }