[ui] various layout fixes - fragment overflow, imageviewer disappeared, pdf iframe height

- add uplink passthrough
- fix delete button position

webui/src/components/Inspect.svelte

@@ -327,6 +327,7 @@
 
     .attributes {
       height: unset;
+      min-height: unset;
       overflow-y: unset;
     }
   }

webui/src/components/display/BlobViewer.svelte

@@ -38,7 +38,7 @@
 </script>
 
 {#if handled}
-  <div class="preview" class:detail class:image>
+  <div class="preview" class:detail class:full={image || pdf}>
     {#if text}
       <div class="text">
         <TextViewer {address} />
@@ -91,7 +91,7 @@
       />
     {/if}
     {#if fragment}
-      <UpLink to={{ entity: String($entity.get("ANNOTATES")) }}>
+      <UpLink passthrough to={{ entity: String($entity.get("ANNOTATES")) }}>
         <FragmentViewer {address} {detail} />
       </UpLink>
     {/if}
@@ -104,16 +104,13 @@
     justify-content: center;
     align-items: center;
     flex-direction: column;
-    max-height: 25em;
+    min-height: 33vh;
+    max-height: 50vh;
 
-    &.detail {
-      max-height: 50vh;
-    }
-
-    &.detail.image {
+    &.detail.full {
       max-height: unset;
       flex-grow: 1;
-      min-height: 0;
+      // min-height: 0;
     }
   }
 
@@ -125,7 +122,8 @@
   }
 
   iframe {
-    width: 100%;
+    width: 99%;
+    flex-grow: 1;
   }
 
   .text {

webui/src/components/display/UpLink.svelte

@@ -13,6 +13,7 @@
     attribute?: string;
     value?: { t: VALUE_TYPE; c: string };
   };
+  export let passthrough = false;
 
   const context = getContext("browse") as BrowseContext | undefined;
   const index = context ? context.index : readable(0);
@@ -41,6 +42,7 @@
 
 <a
   class="uplink"
+  class:passthrough
   href="/#/browse/{to.entity}"
   on:click|preventDefault={onClick}
 >
@@ -51,4 +53,7 @@
   :global(.uplink) {
     text-decoration: none;
   }
+  :global(.uplink.passthrough) {
+    display: contents;
+  }
 </style>

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

@@ -44,6 +44,7 @@
 
   img {
     max-width: 100%;
+    box-sizing: border-box;
     min-height: 0;
     &.imageLoaded {
       border: 2px dashed colors.$yellow;

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

@@ -168,6 +168,8 @@
     anno.on("deleteAnnotation", async (annotation) => {
       await deleteEntry(annotation.id);
     });
+
+    imageLoaded = true;
   }
 </script>