From fbc63d240960f5020b7201cea68c6dc0f10a00d2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= <t@mldk.cz>
Date: Mon, 14 Feb 2022 12:36:37 +0100
Subject: [PATCH] [ui] fix audio preview sizing, rework detail mode, height

---
 webui/src/components/BrowseColumn.svelte           |  1 -
 webui/src/components/display/BlobPreview.svelte    | 14 ++++++++------
 .../components/display/blobs/ImageViewer.svelte    | 13 ++++++++++---
 3 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/webui/src/components/BrowseColumn.svelte b/webui/src/components/BrowseColumn.svelte
index 5c014c0..bcf93a2 100644
--- a/webui/src/components/BrowseColumn.svelte
+++ b/webui/src/components/BrowseColumn.svelte
@@ -53,7 +53,6 @@
     editable={editable || false}
     {index}
     {detail}
-    --preview-height={detail ? "50vh" : "20em"}
     on:resolved
   />
 </div>
diff --git a/webui/src/components/display/BlobPreview.svelte b/webui/src/components/display/BlobPreview.svelte
index 6c65e69..9726447 100644
--- a/webui/src/components/display/BlobPreview.svelte
+++ b/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 {
diff --git a/webui/src/components/display/blobs/ImageViewer.svelte b/webui/src/components/display/blobs/ImageViewer.svelte
index 48693c4..77a7e7b 100644
--- a/webui/src/components/display/blobs/ImageViewer.svelte
+++ b/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;
   }