Port scroll to bottom methods to new component

app/assets/javascripts/jobs/components/log/log.vue

@@ -11,11 +11,35 @@ export default {
   computed: {
     ...mapState(['traceEndpoint', 'trace', 'isTraceComplete']),
   },
+  updated() {
+    this.$nextTick(() => {
+      this.handleScrollDown();
+    });
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.handleScrollDown();
+    });
+  },
   methods: {
-    ...mapActions(['toggleCollapsibleLine']),
+    ...mapActions(['toggleCollapsibleLine', 'scrollBottom']),
     handleOnClickCollapsibleLine(section) {
       this.toggleCollapsibleLine(section);
     },
+    /**
+     * The job log is sent in HTML, which means we need to use `v-html` to render it
+     * Using the updated hook with $nextTick is not enough to wait for the DOM to be updated
+     * in this case because it runs before `v-html` has finished running, since there's no
+     * Vue binding.
+     * In order to scroll the page down after `v-html` has finished, we need to use setTimeout
+     */
+    handleScrollDown() {
+      if (this.isScrolledToBottomBeforeReceivingTrace) {
+        setTimeout(() => {
+          this.scrollBottom();
+        }, 0);
+      }
+    },
   },
 };
 </script>

changelogs/unreleased/35534-broken-scroll-to-bottom.yml

+---
+title: Fix scroll to bottom with new job log
+merge_request:
+author:
+type: fixed