[ui] marquee -> (mid-)ellipsis

(sorta silly emulation for now)

ui/src/components/Address.svelte

@@ -3,7 +3,7 @@
   import { BLOB_TYPE_ADDR } from "upend/constants";
   import { identify, useEntity } from "../lib/entity";
   import HashBadge from "./HashBadge.svelte";
-  import Marquee from "./Marquee.svelte";
+  import Ellipsis from "./Ellipsis.svelte";
   import UpLink from "./UpLink.svelte";
   const dispatch = createEventDispatcher();
 
@@ -41,21 +41,19 @@
 <div class="address" class:identified={Boolean(inferredIds)} class:banner>
   <HashBadge {address} />
   <div class="separator" />
-  <Marquee>
     <div class="label" class:resolving title={label}>
       {#if banner && isFile}
         <a href="/api/raw/{address}" target="_blank">
-          {label}
+          <Ellipsis value={label} />
         </a>
       {:else if link}
         <UpLink to={{ entity: address }}>
-          {label}
+          <Ellipsis value={label} />
         </UpLink>
       {:else}
-        {label}
+      <Ellipsis value={label} />
       {/if}
     </div>
-  </Marquee>
 </div>
 
 <style scoped lang="scss">
@@ -84,6 +82,11 @@
     }
   }
 
+  .label {
+    flex-grow: 1;
+    min-width: 0;
+  }
+
   .separator {
     width: 0.5em;
   }

ui/src/components/Ellipsis.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  export let value: string;
+
+  $: valueStart = value.substring(0, value.length - 7);
+  $: valueEnd = value.substring(value.length - 7, value.length);
+</script>
+
+<div class="ellipsis">
+  <div class="start">{valueStart}</div>
+  <div class="end">{valueEnd}</div>
+</div>
+
+<style lang="scss">
+  .ellipsis {
+    display: inline-flex;
+    flex-wrap: nowrap;
+    max-width: 100%;
+
+    * {
+      display: inline-block;
+      overflow: hidden;
+      white-space: nowrap;
+      min-width: 0;
+    }
+
+    .start {
+      flex: 0 1 auto;
+      text-overflow: ellipsis;
+    }
+
+    .end {
+      flex: 1 0 auto;
+      white-space: nowrap;
+    }
+  }
+</style>

ui/src/components/Marquee.svelte

@@ -1,77 +0,0 @@
-<script lang="ts">
-  import { onMount } from "svelte";
-
-  export let speed = 50;
-
-  let root: HTMLDivElement | undefined;
-  let inner: HTMLDivElement | undefined;
-
-  let overflowed = false;
-  let running = false;
-  let shiftWidth = "unset";
-  let animLength = "unset";
-
-  onMount(() => {
-    const resizeObserver = new ResizeObserver(() => {
-      if (!root) return;
-      overflowed = root.scrollWidth > root.clientWidth;
-      shiftWidth = `-${inner.clientWidth - root.clientWidth}px`;
-      animLength = `${inner.clientWidth / speed}s`;
-    });
-    resizeObserver.observe(inner);
-  });
-</script>
-
-<div
-  class="marquee"
-  class:overflowed
-  class:running
-  on:mouseenter={() => (running = true)}
-  on:mouseleave={() => (running = false)}
-  style={`--shift-width: ${shiftWidth}; --anim-length: ${animLength}`}
-  bind:this={root}
->
-  <div class="inner" bind:this={inner}>
-    <slot />
-  </div>
-</div>
-
-<style lang="scss">
-  .marquee {
-    height: 1.1em;
-    overflow: hidden;
-    flex-grow: 1;
-  }
-
-  .inner {
-    white-space: nowrap;
-    display: inline-block;
-    height: 100%;
-  }
-
-  :global {
-    .overflowed .inner {
-      animation: marquee var(--anim-length) ease-in-out infinite;
-      animation-play-state: paused;
-      --padding: 1px;
-    }
-
-    .overflowed.running .inner {
-      animation-play-state: running;
-    }
-
-    @keyframes marquee {
-      0% {
-        transform: translateX(var(--padding));
-      }
-
-      50% {
-        transform: translateX(calc(var(--shift-width) - var(--padding)));
-      }
-
-      100% {
-        transform: translateX(var(--padding));
-      }
-    }
-  }
-</style>

ui/src/components/widgets/Table.svelte

@@ -2,7 +2,7 @@
   import filesize from "filesize";
   import { format, fromUnixTime } from "date-fns";
   import type { OrderedListing } from "upend/types";
-  import Marquee from "../Marquee.svelte";
+  import Ellipsis from "../Ellipsis.svelte";
   import Address from "../Address.svelte";
   import { createEventDispatcher, getContext } from "svelte";
   import type { AttributeChange } from "../../types/base";
@@ -192,9 +192,7 @@
 
       {#if showAttribute}
         <td class:formatted={Boolean(formatAttribute(entry.attribute))}>
-          <Marquee>
-            {formatAttribute(entry.attribute) || entry.attribute}
-          </Marquee>
+          <Ellipsis value={formatAttribute(entry.attribute) || entry.attribute} />
         </td>
       {/if}
 
@@ -220,9 +218,7 @@
                   formatValue(entry.value.c, entry.attribute)
                 )}
               >
-                <Marquee>
-                  {formatValue(entry.value.c, entry.attribute) || entry.value.c}
-                </Marquee>
+                <Ellipsis value={formatValue(entry.value.c, entry.attribute) || entry.value.c} />
               </div>
             {/if}
           </text-input>