chats work and look a bit better

src/App.scss

@@ -494,7 +494,7 @@ i[class*=icon-],
     bottom: 0;
     left: 0;
     right: 0;
-    z-index: 2;
+    z-index: 100;
     box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
     box-shadow: var(--panelShadow);
     pointer-events: none;

src/components/chat/chat.js

@@ -19,6 +19,8 @@ library.add(
   faChevronLeft
 )
 
+const scroller = () => document.getElementById('content')
+
 const BOTTOMED_OUT_OFFSET = 10
 const JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET = 10
 const SAFE_RESIZE_TIME_OFFSET = 100
@@ -46,7 +48,7 @@ const Chat = {
     window.addEventListener('resize', this.handleLayoutChange)
   },
   mounted () {
-    window.addEventListener('scroll', this.handleScroll)
+    scroller().addEventListener('scroll', this.handleScroll)
     if (typeof document.hidden !== 'undefined') {
       document.addEventListener('visibilitychange', this.handleVisibilityChange, false)
     }
@@ -57,7 +59,7 @@ const Chat = {
     this.setChatLayout()
   },
   unmounted () {
-    window.removeEventListener('scroll', this.handleScroll)
+    scroller().removeEventListener('scroll', this.handleScroll)
     window.removeEventListener('resize', this.handleLayoutChange)
     this.unsetChatLayout()
     if (typeof document.hidden !== 'undefined') document.removeEventListener('visibilitychange', this.handleVisibilityChange, false)
@@ -177,13 +179,13 @@ const Chat = {
 
       this.$nextTick(() => {
         const { offsetHeight = undefined } = this.lastScrollPosition
-        this.lastScrollPosition = getScrollPosition(document.getElementById('content'))
+        this.lastScrollPosition = getScrollPosition(scroller())
 
         const diff = this.lastScrollPosition.offsetHeight - offsetHeight
         if (diff < 0 || (!this.bottomedOut() && expand)) {
           this.$nextTick(() => {
-            document.getElementById('content').scrollTo({
-              top: document.getElementById('content').scrollTop - diff,
+            scroller().scrollTo({
+              top: scroller().scrollTop - diff,
               left: 0
             })
           })
@@ -192,7 +194,7 @@ const Chat = {
     },
     scrollDown (options = {}) {
       const { behavior = 'auto', forceRead = false } = options
-      const scrollable = document.getElementById('content')
+      const scrollable = scroller()
       if (!scrollable) { return }
       this.$nextTick(() => {
         scrollable.scrollTo({ top: scrollable.scrollHeight, left: 0, behavior })
@@ -211,10 +213,10 @@ const Chat = {
       })
     },
     bottomedOut (offset) {
-      return isBottomedOut(document.getElementById('content'), offset)
+      return isBottomedOut(scroller(), offset)
     },
     reachedTop () {
-      const scrollable = document.getElementById('content')
+      const scrollable = scroller()
       return scrollable && scrollable.scrollTop <= 0
     },
     cullOlderCheck () {
@@ -246,8 +248,8 @@ const Chat = {
       }
     }, 200),
     handleScrollUp (positionBeforeLoading) {
-      const positionAfterLoading = getScrollPosition(document.getElementById('content'))
-      this.$refs.scrollable.scrollTo({
+      const positionAfterLoading = getScrollPosition(scroller())
+      scroller().scrollTo({
         top: getNewTopPosition(positionBeforeLoading, positionAfterLoading),
         left: 0
       })
@@ -268,7 +270,7 @@ const Chat = {
             chatService.clear(chatMessageService)
           }
 
-          const positionBeforeUpdate = getScrollPosition(document.getElementById('content'))
+          const positionBeforeUpdate = getScrollPosition(scroller())
           this.$store.dispatch('addChatMessages', { chatId, messages }).then(() => {
             this.$nextTick(() => {
               if (fetchOlderMessages) {

src/components/chat/chat.scss

@@ -37,6 +37,7 @@
     bottom: 0;
     background-color: $fallback--bg;
     background-color: var(--bg, $fallback--bg);
+    z-index: 10;
   }
 
   .chat-view-heading {

src/components/chat/chat_layout_utils.js

 // Captures a scroll position
 export const getScrollPosition = (el) => {
-  console.log(el)
   return {
     scrollTop: el.scrollTop,
     scrollHeight: el.scrollHeight,