[ui] workable search display

webui/src/components/display/UpObjectCard.svelte

@@ -52,11 +52,13 @@
 
     border: 0.12em solid var(--foreground);
     border-radius: 0.2em;
-    padding: 0.5em;
 
     font-family: var(--monospace-font);
     line-break: anywhere;
 
+    width: var(--width);
+    height: var(--height);
+
     &.identified {
       font-family: var(--default-font);
       font-size: 0.95em;
@@ -64,11 +66,20 @@
     }
 
     :global(.main) {
+      text-decoration: none;
+      
+      height: 100%;
       display: flex;
       flex-direction: column;
       align-items: center;
+      justify-content: center;
 
-      text-decoration: none;
+      margin: 0 .5em;
+    }
+
+    :global(.main > *){
+      min-width: 0;
+      max-width: 100%;
     }
   }
 
@@ -83,7 +94,7 @@
 
     .note {
       margin: 0;
-      font-size: .66em;
+      font-size: 0.66em;
     }
   }
 

webui/src/views/Search.svelte

@@ -48,7 +48,7 @@
 <div>
   {#if !$error}
     {#if $result}
-      <section>
+      <section class="exact">
         <h2>Exact</h2>
         {#if exact.length}
           exakt
@@ -56,23 +56,24 @@
           Create?
         {/if}
       </section>
-      {#await objects}
-        <section>
-          <h2>Objects</h2>
+
+      <section class="objects">
+        <h2>Objects</h2>
+        {#await objects}
           <Spinner />
-        </section>
-      {:then objects}
-        <section>
-          <h2>Objects</h2>
+        {:then objects}
           <ul>
             {#each objects as address}
-              <li><UpObjectCard {address} /></li>
+              <li>
+                <UpObjectCard {address} --width="100%" --height="100%" />
+              </li>
             {/each}
           </ul>
-        </section>
-      {/await}
+        {/await}
+      </section>
+
       {#if entries.length}
-        <section>
+        <section class="raw">
           <h2>Raw results</h2>
           <ul>
             {#each entries as entry}
@@ -106,9 +107,27 @@
     padding: 0;
   }
 
-  li {
-    margin: 1em auto;
-    max-width: 66em;
+  .objects {
+    ul {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      gap: 1rem;
+      justify-items: center;
+
+      margin: 0 1rem;
+    }
+
+    li {
+      width: 14rem;
+      height: 8rem;
+    }
+  }
+
+  .raw {
+    li {
+      margin: 1em auto;
+      max-width: 66em;
+    }
   }
 
   .global {