scroll to end of browser on new view opened

ui/src/views/Browse.vue

@@ -1,6 +1,11 @@
 <template>
-  <div class="browser">
-    <div class="view" v-for="(address, idx) in addresses" :key="address">
+  <div class="browser" ref="root">
+    <div
+      class="view"
+      v-for="(address, idx) in addresses"
+      :key="address"
+      :data-address="address"
+    >
       <header :class="{ disabled: addresses.length === 1 }">
         <sl-icon-button
           class="this-button"
@@ -33,10 +38,19 @@ export default defineComponent({
       required: true,
     },
   },
-  data: () => {
-    return {};
+  watch: {
+    addresses(addresses: string[], prevAddresses: string[]) {
+      const root = this.$refs.root as HTMLDivElement;
+      if (addresses.length > prevAddresses.length) {
+        this.$nextTick().then(() => {
+          root.scrollTo({
+            left: root.scrollWidth,
+            behavior: "smooth",
+          });
+        });
+      }
+    },
   },
-  setup(props) {},
   methods: {
     visit(idx: number) {
       this.$router.push({
@@ -57,7 +71,12 @@ export default defineComponent({
 <style scoped lang="scss">
 .browser {
   display: flex;
+
   min-height: 100%;
+  margin-left: -2rem;
+  margin-right: -2rem;
+  padding: 0 2rem;
+
   overflow-x: auto;
 }