From 15ea9d8c917d6d0408a9c48f38976d19f9936054 Mon Sep 17 00:00:00 2001
From: eugenijm <eugenijm@protonmail.com>
Date: Fri, 6 Nov 2020 01:20:08 +0300
Subject: [PATCH] Fix the chat scroll behavior for vertical screens.

Fetch the messages until the scrollbar becomes visible, so that the user
always has the ability to scroll up and load new messages.
---
 CHANGELOG.md                             |  1 +
 src/components/chat/chat.js              | 10 +++++++++-
 src/components/chat/chat_layout_utils.js |  7 +++++++
 3 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3c338de8..056a0881 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -20,6 +20,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Fixed multiple regressions in CSS styles
 - Fixed multiple issues with input fields when using CJK font as default
 - Fixed search field in navbar infringing into logo in some cases
+- Fixed not being able to load the chat history in vertical screens when the message list doesn't take the full height of the scrollable container on the first fetch.
 
 ### Changed
 - Clicking immediately when timeline shifts is now blocked to prevent misclicks
diff --git a/src/components/chat/chat.js b/src/components/chat/chat.js
index 2887afb5..e57fcb91 100644
--- a/src/components/chat/chat.js
+++ b/src/components/chat/chat.js
@@ -6,7 +6,7 @@ import PostStatusForm from '../post_status_form/post_status_form.vue'
 import ChatTitle from '../chat_title/chat_title.vue'
 import chatService from '../../services/chat_service/chat_service.js'
 import { promiseInterval } from '../../services/promise_interval/promise_interval.js'
-import { getScrollPosition, getNewTopPosition, isBottomedOut, scrollableContainerHeight } from './chat_layout_utils.js'
+import { getScrollPosition, getNewTopPosition, isBottomedOut, scrollableContainerHeight, isScrollable } from './chat_layout_utils.js'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faChevronDown,
@@ -287,6 +287,14 @@ const Chat = {
               if (isFirstFetch) {
                 this.updateScrollableContainerHeight()
               }
+
+              // In vertical screens, the first batch of fetched messages may not always take the
+              // full height of the scrollable container.
+              // If this is the case, we want to fetch the messages until the scrollable container
+              // is fully populated so that the user has the ability to scroll up and load the history.
+              if (!isScrollable(this.$refs.scrollable) && messages.length > 0) {
+                this.fetchChat({ maxId: this.currentChatMessageService.minId })
+              }
             })
           })
         })
diff --git a/src/components/chat/chat_layout_utils.js b/src/components/chat/chat_layout_utils.js
index 609dc0c9..50a933ac 100644
--- a/src/components/chat/chat_layout_utils.js
+++ b/src/components/chat/chat_layout_utils.js
@@ -24,3 +24,10 @@ export const isBottomedOut = (el, offset = 0) => {
 export const scrollableContainerHeight = (inner, header, footer) => {
   return inner.offsetHeight - header.clientHeight - footer.clientHeight
 }
+
+// Returns whether or not the scrollbar is visible.
+export const isScrollable = (el) => {
+  if (!el) return
+
+  return el.scrollHeight > el.clientHeight
+}