diff --git a/webui/src/components/display/BlobPreview.svelte b/webui/src/components/display/BlobPreview.svelte
index dd41c5a..2317444 100644
--- a/webui/src/components/display/BlobPreview.svelte
+++ b/webui/src/components/display/BlobPreview.svelte
@@ -61,83 +61,85 @@
   }
 </script>
 
-<div class="preview" bind:clientHeight>
+<div class="preview">
   {#if handled}
-    {#if !loaded}
-      <Spinner centered="absolute" />
-    {/if}
-    {#if types.group}
-      <ul class="group">
-        {#each groupChildren as address (address)}
-          <li>
-            <svelte:self
-              {address}
-              recurse={recurse - 1}
-              on:handled={(ev) => {
-                if (!ev.detail && !failedChildren.includes(address))
-                  failedChildren = [...failedChildren, address];
-              }}
-              on:loaded={(ev) => {
-                if (ev.detail && !loadedChildren.includes(address))
-                  loadedChildren = [...loadedChildren, address];
-              }}
-            />
-          </li>
-        {/each}
-      </ul>
-    {:else if types.model}
-      <ModelViewer
-        lookonly
-        src="{API_URL}/raw/{address}"
-        on:loaded={() => (loaded = address)}
-      />
-    {:else if types.web}
-      <img
-        src={String($entity?.get("OG_IMAGE"))}
-        alt="OpenGraph image for {$entityInfo?.t == 'Url' && $entityInfo?.c}"
-        on:load={() => (loaded = address)}
-        on:error={() => (handled = false)}
-      />
-    {:else if types.fragment}
-      <FragmentViewer
-        {address}
-        detail={false}
-        on:loaded={() => (loaded = address)}
-      />
-    {:else if types.audio}
-      <div class="audiopreview image">
+    <div class="inner" bind:clientHeight>
+      {#if !loaded}
+        <Spinner centered="absolute" />
+      {/if}
+      {#if types.group}
+        <ul class="group">
+          {#each groupChildren as address (address)}
+            <li>
+              <svelte:self
+                {address}
+                recurse={recurse - 1}
+                on:handled={(ev) => {
+                  if (!ev.detail && !failedChildren.includes(address))
+                    failedChildren = [...failedChildren, address];
+                }}
+                on:loaded={(ev) => {
+                  if (ev.detail && !loadedChildren.includes(address))
+                    loadedChildren = [...loadedChildren, address];
+                }}
+              />
+            </li>
+          {/each}
+        </ul>
+      {:else if types.model}
+        <ModelViewer
+          lookonly
+          src="{API_URL}/raw/{address}"
+          on:loaded={() => (loaded = address)}
+        />
+      {:else if types.web}
         <img
-          src="{API_URL}/thumb/{address}?mime=audio"
-          alt="Thumbnail for {address}..."
-          loading="lazy"
+          src={String($entity?.get("OG_IMAGE"))}
+          alt="OpenGraph image for {$entityInfo?.t == 'Url' && $entityInfo?.c}"
           on:load={() => (loaded = address)}
           on:error={() => (handled = false)}
         />
-        {#if mediaDuration}
-          <div class="duration" style="--font-size: {clientHeight * 0.28}px">
-            {mediaDuration}
-          </div>
-        {/if}
-      </div>
-    {:else if types.video}
-      <VideoViewer
-        {address}
-        detail={false}
-        on:loaded={() => (loaded = address)}
-      />
-    {:else}
-      <div class="image" class:loaded={loaded == address || !handled}>
-        <img
-          src="{API_URL}/{types.mimeType?.includes('svg+xml')
-            ? 'raw'
-            : 'thumb'}/{address}?size=512&quality=75"
-          alt="Thumbnail for {address}..."
-          loading="lazy"
-          on:load={() => (loaded = address)}
-          on:error={() => (handled = false)}
+      {:else if types.fragment}
+        <FragmentViewer
+          {address}
+          detail={false}
+          on:loaded={() => (loaded = address)}
         />
-      </div>
-    {/if}
+      {:else if types.audio}
+        <div class="audiopreview image">
+          <img
+            src="{API_URL}/thumb/{address}?mime=audio"
+            alt="Thumbnail for {address}..."
+            loading="lazy"
+            on:load={() => (loaded = address)}
+            on:error={() => (handled = false)}
+          />
+          {#if mediaDuration}
+            <div class="duration" style="--font-size: {clientHeight * 0.66}px">
+              {mediaDuration}
+            </div>
+          {/if}
+        </div>
+      {:else if types.video}
+        <VideoViewer
+          {address}
+          detail={false}
+          on:loaded={() => (loaded = address)}
+        />
+      {:else}
+        <div class="image" class:loaded={loaded == address || !handled}>
+          <img
+            src="{API_URL}/{types.mimeType?.includes('svg+xml')
+              ? 'raw'
+              : 'thumb'}/{address}?size=512&quality=75"
+            alt="Thumbnail for {address}..."
+            loading="lazy"
+            on:load={() => (loaded = address)}
+            on:error={() => (handled = false)}
+          />
+        </div>
+      {/if}
+    </div>
   {:else}
     <div class="hashbadge">
       <HashBadge {address} />
@@ -153,6 +155,10 @@
     min-height: 0;
     display: flex;
     flex-direction: column;
+
+    .inner {
+      display: relative;
+    }
   }
 
   .hashbadge {
@@ -201,8 +207,8 @@
     grid-template-columns: repeat(2, 1fr);
     grid-template-rows: repeat(2, 1fr);
 
-    padding: .25rem;
-    gap: .25rem;
+    padding: 0.25rem;
+    gap: 0.25rem;
     border: 1px solid var(--foreground);
     border-radius: 4px;