add marquee for overflowing info

ui/src/components/Address.vue

@@ -1,34 +1,31 @@
 <template>
   <div :class="['address', { identified: Boolean(inferredIds) }]" ref="root">
     <hash-badge :address="address" class="hash-badge" />
-    <up-link v-if="isFile" :to="{ entity: address }">
+    <Marquee>
-      {{ address }}
+      <up-link v-if="isFile" :to="{ entity: address }">
-    </up-link>
+        {{ address }}
-    <template v-else>
-      <up-link v-if="link" :to="{ entity: address }">
-        {{ inferredIds.join(" | ") || address }}
       </up-link>
       <template v-else>
-        {{ inferredIds.join(" | ") || address }}
+        <up-link v-if="link" :to="{ entity: address }">
+          {{ inferredIds.join(" | ") || address }}
+        </up-link>
+        <template v-else>
+          {{ inferredIds.join(" | ") || address }}
+        </template>
       </template>
-    </template>
+    </Marquee>
   </div>
 </template>
 
 <script lang="ts">
 import { identify, useEntity } from "@/lib/entity";
-import {
+import { computed, ComputedRef, defineComponent, onMounted, ref } from "vue";
-  computed,
-  ComputedRef,
-  defineComponent,
-  onMounted,
-  ref,
-} from "vue";
 import HashBadge from "./HashBadge.vue";
 import UpLink from "./UpLink.vue";
+import Marquee from "./Marquee.vue";
 
 export default defineComponent({
-  components: { HashBadge, UpLink },
+  components: { HashBadge, UpLink, Marquee },
   name: "Address",
   props: {
     address: {

ui/src/components/Marquee.vue

@@ -0,0 +1,76 @@
+<template>
+  <div
+    class="marquee"
+    :class="{ overflowed }"
+    :style="`--shift-width: ${shiftWidth}`"
+    ref="root"
+  >
+    <div class="inner" ref="inner">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted, ref } from "vue";
+
+export default defineComponent({
+  name: "Marquee",
+  setup() {
+    const root = ref<HTMLDivElement | null>(null);
+    const inner = ref<HTMLDivElement | null>(null);
+    const overflowed = ref(false);
+    const shiftWidth = ref("unset");
+
+    onMounted(() => {
+      const resizeObserver = new ResizeObserver(() => {
+        overflowed.value = root.value!.scrollWidth > root.value!.clientWidth;
+        shiftWidth.value = `-${
+          inner.value!.clientWidth - root.value!.clientWidth
+        }px`;
+      });
+      resizeObserver.observe(inner.value!);
+    });
+
+    return {
+      root,
+      inner,
+      overflowed,
+      shiftWidth,
+    };
+  },
+});
+</script>
+
+<style scoped lang="scss">
+.marquee {
+  line-height: 1;
+  overflow: hidden;
+}
+
+.inner {
+  white-space: nowrap;
+  display: inline-block;
+}
+</style>
+
+<style lang="scss">
+.overflowed .inner {
+  animation: marquee 12s ease-in-out infinite;
+  --padding: .5em;
+}
+
+@keyframes marquee {
+  0% {
+    transform: translateX(var(--padding));
+  }
+
+  50% {
+    transform: translateX(calc(var(--shift-width) - var(--padding)));
+  }
+
+  100% {
+    transform: translateX(var(--padding));
+  }
+}
+</style>

ui/src/views/Inspect.vue

@@ -21,6 +21,11 @@
           {{ types[typeAddr]?.name || "???" }}
         </h3>
         <table>
+          <colgroup>
+            <col class="attr-action-col" />
+            <col />
+            <col />
+          </colgroup>
           <tr>
             <th></th>
             <th>Attribute</th>
@@ -30,16 +35,20 @@
             <td class="attr-action">
               <sl-icon-button name="x-circle" @click="removeEntry(id)" />
             </td>
-            <td>{{ entry.attribute }}</td>
             <td>
-              <Address
+              <Marquee>{{ entry.attribute }}</Marquee>
-                link
+            </td>
-                v-if="entry.value.t === 'Address'"
+            <td>
-                :address="entry.value.c"
+              <Marquee>
-              />
+                <Address
-              <template v-else>
+                  link
-                {{ entry.value.c }}
+                  v-if="entry.value.t === 'Address'"
-              </template>
+                  :address="entry.value.c"
+                />
+                <template v-else>
+                  {{ entry.value.c }}
+                </template>
+              </Marquee>
             </td>
           </tr>
         </table>
@@ -50,6 +59,11 @@
           Other attributes
         </h3>
         <table>
+          <colgroup>
+            <col class="attr-action-col" />
+            <col />
+            <col />
+          </colgroup>
           <tr>
             <th></th>
             <th>Attribute</th>
@@ -59,16 +73,20 @@
             <td class="attr-action">
               <sl-icon-button name="x-circle" @click="removeEntry(id)" />
             </td>
-            <td>{{ entry.attribute }}</td>
             <td>
-              <Address
+              <Marquee>{{ entry.attribute }}</Marquee>
-                link
+            </td>
-                v-if="entry.value.t === 'Address'"
+            <td>
-                :address="entry.value.c"
+              <Marquee>
-              />
+                <Address
-              <template v-else>
+                  link
-                {{ entry.value.c }}
+                  v-if="entry.value.t === 'Address'"
-              </template>
+                  :address="entry.value.c"
+                />
+                <template v-else>
+                  {{ entry.value.c }}
+                </template>
+              </Marquee>
             </td>
           </tr>
           <tr>
@@ -94,10 +112,14 @@
             </tr>
             <tr v-for="[id, entry] in backlinks" :key="id">
               <td>
-                <Address link :address="entry.entity" />
+                <Marquee>
+                  <Address link :address="entry.entity" />
+                </Marquee>
               </td>
               <td>
-                {{ entry.attribute }}
+                <Marquee>
+                  {{ entry.attribute }}
+                </Marquee>
               </td>
             </tr>
           </table>
@@ -113,6 +135,7 @@
 <script lang="ts">
 import Address from "@/components/Address.vue";
 import BlobPreview from "@/components/BlobPreview.vue";
+import Marquee from "@/components/Marquee.vue";
 import { query, useEntity } from "@/lib/entity";
 import { UpType } from "@/lib/types";
 import { IEntry } from "@/types/base";
@@ -123,6 +146,7 @@ export default defineComponent({
   components: {
     Address,
     BlobPreview,
+    Marquee,
   },
   props: {
     address: {
@@ -248,12 +272,9 @@ export default defineComponent({
 </script>
 
 <style  lang="scss">
-.inspect {
-  overflow: auto;
-}
-
 table {
   width: 100%;
+  table-layout: fixed;
 
   th {
     text-align: left;
@@ -270,8 +291,8 @@ table {
     }
   }
 
-  sl-input {
+  .attr-action-col {
-    max-width: 8em;
+    width: 2em;
   }
 }