fix: remove BlobViewer duplicity in Inspect

- retain state on detail switch
- probably perf improvement?

webui/src/components/Inspect.svelte

@@ -227,9 +227,6 @@
     </h2>
   </header>
   <div class="main-content">
-    <div class="show-detail blob-viewer">
-      <BlobViewer {address} {editable} {detail} bind:handled={blobHandled} />
-    </div>
     <div class="detail-col">
       {#if groups?.length || editable}
         <section class="groups labelborder">
@@ -260,8 +257,13 @@
           </div>
         </section>
       {/if}
-      <div class="hide-detail">
-        <BlobViewer {address} {editable} {detail} />
+      <div class="blob-viewer">
+        <BlobViewer
+          {address}
+          {editable}
+          {detail}
+          on:handled={(ev) => (blobHandled = ev.detail)}
+        />
       </div>
       <NotesEditor {address} {editable} on:change={onChange} />
       {#if !$error}
@@ -380,27 +382,26 @@
   }
 
   .inspect.detail {
-    .hide-detail {
-      display: none;
-    }
-
-    .show-detail {
-      display: unset;
-    }
-
-    &:not(.blob) {
-      .blob-viewer {
-        display: none;
-      }
-    }
-
     .main-content {
+      position: relative;
       flex-direction: row;
-      .blob-viewer {
-        min-width: 75%;
-      }
+      justify-content: end;
+    }
+
+    .blob-viewer {
+      width: 73%;
+      position: absolute;
+      left: 1%;
+      top: 0;
+    }
+
+    .detail-col {
+      width: 25%;
+    }
+
+    &.blob {
       .detail-col {
-        overflow-y: auto;
+        flex-grow: 0;
       }
     }
   }

webui/src/components/display/BlobViewer.svelte

@@ -9,12 +9,14 @@
   import VideoViewer from "./blobs/VideoViewer.svelte";
   import UpLink from "./UpLink.svelte";
   import { API_URL } from "../../lib/api";
+  import { createEventDispatcher } from "svelte";
+  const dispatch = createEventDispatcher();
 
   export let address: string;
   export let editable: boolean;
   export let detail: boolean;
 
-  export let handled = false;
+  let handled = false;
 
   $: ({ entity, entityInfo } = useEntity(address));
 
@@ -38,6 +40,8 @@
   $: handled =
     audio || video || image || text || pdf || model || web || fragment;
 
+  $: dispatch("handled", handled);
+
   let imageLoaded = null;
 </script>