layout fixes & Browse component base

ui/src/components/Address.vue

@@ -8,7 +8,9 @@
       <router-link v-if="link" :to="{ name: 'inspect', params: { address } }">
         {{ inferredId || address }}
       </router-link>
-      <template v-else>{{ inferredId || address }}</template>
+      <template v-else>
+        {{ inferredId || address }}
+      </template>
     </template>
   </div>
 </template>
@@ -96,9 +98,14 @@ export default defineComponent({
   display: flex;
 }
 
+.address {
+  line-break: anywhere;
+}
+
 .address.identified {
   font-family: var(--default-font);
   font-size: 0.95em;
+  line-break: auto;
 }
 
 .hash-badge {

ui/src/router/index.ts

@@ -3,6 +3,7 @@ import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
 import Home from "../views/Home.vue";
 import Search from '../views/Search.vue';
 import File from '../views/File.vue';
+import Browse from '../views/Browse.vue';
 
 const routes: Array<RouteRecordRaw> = [
   {
@@ -27,6 +28,12 @@ const routes: Array<RouteRecordRaw> = [
     component: File,
     props: true
   },
+  {
+    path: "/browse/:addresses+",
+    name: "browse",
+    component: Browse,
+    props: true
+  },
   {
     path: '/about',
     name: 'about',

ui/src/views/Browse.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="browser">
+    <div class="view" v-for="address in addresses" :key="address">
+      <Inspect :address="address" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType } from "vue";
+import { useEntity } from "@/lib/entity";
+import Inspect from "@/views/Inspect.vue";
+
+export default defineComponent({
+  name: "Browse",
+  components: {
+    Inspect,
+  },
+  props: {
+    addresses: {
+      type: Array as PropType<String[]>,
+      required: true,
+    },
+  },
+  data: () => {
+    return {};
+  },
+  setup(props) {
+  },
+});
+</script>
+
+<style scoped lang="scss">
+.browser {
+  display: flex;
+
+  min-height: 100%;
+}
+
+.view {
+  max-width: 33%;
+
+  border-left: 1px solid var(--foreground);
+  border-right: 1px solid var(--foreground);
+
+  margin: 1rem 0;
+  padding: 0 1rem;
+}
+</style>

ui/src/views/Home.vue

@@ -11,7 +11,7 @@
         <li v-for="file in latestFiles" :key="file.hash">
           <div class="file-added">{{ file.added }}</div>
           <router-link
-            :to="{ name: 'inspect', params: { address: file.hash } }"
+            :to="{ name: 'browse', params: { addresses: [file.hash] } }"
           >
             <div class="file-path">{{ file.path }}</div>
           </router-link>

ui/src/views/Inspect.vue

@@ -133,8 +133,10 @@ export default defineComponent({
 });
 </script>
 
-<style scoped lang="scss">
+<style  lang="scss">
 table {
+  width: 100%;
+
   th {
     text-align: left;
   }
@@ -143,6 +145,10 @@ table {
     font-family: var(--monospace-font);
     padding-right: 1em;
   }
+
+  sl-input {
+    max-width: 8em;
+  }
 }
 
 .error {