fix: blobpreview sizing

webui/src/components/display/BlobPreview.svelte

@@ -103,7 +103,10 @@
     justify-content: center;
     align-items: center;
     flex-direction: column;
-    max-height: max(25em, 100%);
+    max-height: 100%;
+    
+    flex-grow: 1;
+    min-height: 0;
   }
 
   .image {
@@ -129,19 +132,24 @@
   .group {
     padding: 0;
 
+    flex-grow: 1;
+    min-height: 0;
+    width: 100%;
+
     display: grid;
     grid-template-columns: repeat(2, 1fr);
-    min-height: 0;
+    grid-template-rows: repeat(2, 1fr);
+
     margin: 2px;
     border: 1px solid var(--foreground);
     border-radius: 4px;
 
     li {
-      list-style: none;
-      min-height: 0;
       display: flex;
       flex-direction: column;
-      justify-content: flex-end;
+      justify-content: end;
+      list-style: none;
+      min-height: 0;
     }
   }
 </style>

webui/src/components/widgets/Gallery.svelte

@@ -96,7 +96,7 @@
     {#each sortedEntities as entity (entity)}
       {#if thumbnails}
         <div class="thumbnail">
-          <UpLink to={{ entity }}>
+          <UpLink to={{ entity }} passthrough>
             <BlobPreview address={entity} />
             <div class="label">
               <UpObject
@@ -120,6 +120,7 @@
     border: 1px solid var(--foreground-lighter);
     border-radius: 4px;
     padding: 0.25em;
+    max-height: 420px;
   }
 
   .items {
@@ -133,6 +134,10 @@
   :global(.gallery.style-grid .items) {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
+
+    .thumbnail {
+      height: 256px;
+    }
   }
 
   :global(.gallery.style-flex .items) {
@@ -151,9 +156,5 @@
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
-
-    flex-grow: 1;
-    min-width: 0;
-    flex-basis: 20%;
   }
 </style>