scrolling

src/components/chat_message/chat_message.js

@@ -153,6 +153,11 @@ const ChatMessage = {
       menuOpened: false,
     }
   },
+  watch: {
+    focused: function (value) {
+      this.scrollIfFocused(value)
+    },
+  },
   methods: {
     onHover(bool) {
       this.$emit('hover', {
@@ -188,6 +193,22 @@ const ChatMessage = {
       this.hovered = false
       this.menuOpened = false
     },
+    scrollIfFocused(focused) {
+      if (this.$el.getBoundingClientRect == null) return
+      if (focused) {
+        const rect = this.$el.getBoundingClientRect()
+        if (rect.top < 100) {
+          // Post is above screen, match its top to screen top
+          window.scrollBy(0, rect.top - 100)
+        } else if (rect.height >= window.innerHeight - 50) {
+          // Post we want to see is taller than screen so match its top to screen top
+          window.scrollBy(0, rect.top - 100)
+        } else if (rect.bottom > window.innerHeight - 50) {
+          // Post is below screen, match its bottom to screen bottom
+          window.scrollBy(0, rect.bottom - window.innerHeight + 50)
+        }
+      }
+    },
   },
 }
 

src/components/conversation/conversation.vue

@@ -11,7 +11,7 @@
     >
       <h1 class="title">
         <RichContent
-          v-if="conversation[0].summary"
+          v-if="conversation[0]?.summary"
           :html="conversation[0].summary"
           />
         <template v-else>

src/components/status/status.js

@@ -540,10 +540,9 @@ const Status = {
     toggleThreadDisplay() {
       this.controlledToggleThreadDisplay()
     },
-    scrollIfFocused(focusedId) {
+    scrollIfFocused(focused) {
       if (this.$el.getBoundingClientRect == null) return
-      const id = focusedId
-      if (this.status.id === id) {
+      if (focused) {
         const rect = this.$el.getBoundingClientRect()
         if (rect.top < 100) {
           // Post is above screen, match its top to screen top