2 files changed, 16 insertions, 9 deletions

diff --git a/src/components/chat/chat.js b/src/components/chat/chat.js
index 34e723d0..681ba08f 100644
--- a/src/components/chat/chat.js
+++ b/src/components/chat/chat.js
@@ -11,6 +11,7 @@ import { getScrollPosition, getNewTopPosition, isBottomedOut, scrollableContaine
 const BOTTOMED_OUT_OFFSET = 10
 const JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET = 150
 const SAFE_RESIZE_TIME_OFFSET = 100
+const MARK_AS_READ_DELAY = 1500
 
 const Chat = {
   components: {
@@ -94,7 +95,7 @@ const Chat = {
       const bottomedOutBeforeUpdate = this.bottomedOut(BOTTOMED_OUT_OFFSET)
       this.$nextTick(() => {
         if (bottomedOutBeforeUpdate) {
-          this.scrollDown({ forceRead: !document.hidden })
+          this.scrollDown()
         }
       })
     },
@@ -200,7 +201,7 @@ const Chat = {
       this.$nextTick(() => {
         scrollable.scrollTo({ top: scrollable.scrollHeight, left: 0, behavior })
       })
-      if (forceRead || this.newMessageCount > 0) {
+      if (forceRead) {
         this.readChat()
       }
     },
@@ -225,12 +226,17 @@ const Chat = {
       } else if (this.bottomedOut(JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET)) {
         this.jumpToBottomButtonVisible = false
         if (this.newMessageCount > 0) {
-          this.readChat()
+          // Use a delay before marking as read to prevent situation where new messages
+          // arrive just as you're leaving the view and messages that you didn't actually
+          // get to see get marked as read.
+          window.setTimeout(() => {
+            if (this.$el) this.readChat()
+          }, MARK_AS_READ_DELAY)
         }
       } else {
         this.jumpToBottomButtonVisible = true
       }
-    }, 100),
+    }, 200),
     handleScrollUp (positionBeforeLoading) {
       const positionAfterLoading = getScrollPosition(this.$refs.scrollable)
       this.$refs.scrollable.scrollTo({
diff --git a/src/components/chat/chat.scss b/src/components/chat/chat.scss
index 012a1b1d..f91de618 100644
--- a/src/components/chat/chat.scss
+++ b/src/components/chat/chat.scss
@@ -25,7 +25,7 @@
     min-height: 100%;
     margin: 0 0 0 0;
     border-radius: 10px 10px 0 0;
-    border-radius: var(--panelRadius, 10px) var(--panelRadius, 10px) 0 0 ;
+    border-radius: var(--panelRadius, 10px) var(--panelRadius, 10px) 0 0;
 
     &::after {
       border-radius: 0;
@@ -58,11 +58,12 @@
 
   .go-back-button {
     cursor: pointer;
-    margin-right: 1.4em;
+    padding: 0.6em;
+    margin: -0.6em 0.8em -0.6em -0.6em;
+    height: 100%;
 
     i {
-      display: flex;
-      align-items: center;
+      vertical-align: middle;
     }
   }
 
@@ -78,7 +79,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3), 0px 2px 4px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.3);
     z-index: 10;
     transition: 0.35s all;
     transition-timing-function: cubic-bezier(0, 1, 0.5, 1);