From 29c1c8d1e1796242d549ec08d5024cb9ee771788 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 18 Feb 2022 13:03:16 +0000
Subject: [PATCH] Fix ScrollPanel data-scrollbar not responding to window
 resizing (#7841)

---
 .../structures/AutoHideScrollbar.tsx          |  4 ----
 src/components/structures/ScrollPanel.tsx     | 19 +++++++++++++++++--
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/components/structures/AutoHideScrollbar.tsx b/src/components/structures/AutoHideScrollbar.tsx
index 31719a2cf1..d2134c33fe 100644
--- a/src/components/structures/AutoHideScrollbar.tsx
+++ b/src/components/structures/AutoHideScrollbar.tsx
@@ -47,10 +47,6 @@ export default class AutoHideScrollbar extends React.Component<IProps> {
         }
     }
 
-    public getScrollTop(): number {
-        return this.containerRef.current.scrollTop;
-    }
-
     public render() {
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         const { className, onScroll, onWheel, style, tabIndex, wrappedRef, children, ...otherProps } = this.props;
diff --git a/src/components/structures/ScrollPanel.tsx b/src/components/structures/ScrollPanel.tsx
index 93a4a74cfe..d650cfc962 100644
--- a/src/components/structures/ScrollPanel.tsx
+++ b/src/components/structures/ScrollPanel.tsx
@@ -23,6 +23,7 @@ import { replaceableComponent } from "../../utils/replaceableComponent";
 import { getKeyBindingsManager } from "../../KeyBindingsManager";
 import ResizeNotifier from "../../utils/ResizeNotifier";
 import { KeyBindingAction } from "../../accessibility/KeyboardShortcuts";
+import UIStore, { UI_EVENTS } from "../../stores/UIStore";
 
 const DEBUG_SCROLL = false;
 
@@ -214,6 +215,8 @@ export default class ScrollPanel extends React.Component<IProps> {
 
     componentDidMount() {
         this.checkScroll();
+
+        UIStore.instance.on(UI_EVENTS.Resize, this.onUiResize);
     }
 
     componentDidUpdate() {
@@ -236,6 +239,8 @@ export default class ScrollPanel extends React.Component<IProps> {
         if (this.props.resizeNotifier) {
             this.props.resizeNotifier.removeListener("middlePanelResizedNoisy", this.onResize);
         }
+
+        UIStore.instance.off(UI_EVENTS.Resize, this.onUiResize);
     }
 
     private onScroll = ev => {
@@ -730,6 +735,17 @@ export default class ScrollPanel extends React.Component<IProps> {
         }
     }
 
+    private onUiResize = () => {
+        this.setDataScrollbar();
+    };
+
+    private setDataScrollbar(contentHeight = this.getMessagesHeight()) {
+        const sn = this.getScrollNode();
+        const minHeight = sn.clientHeight;
+        const displayScrollbar = contentHeight > minHeight;
+        sn.dataset.scrollbar = displayScrollbar.toString();
+    }
+
     // need a better name that also indicates this will change scrollTop? Rebalance height? Reveal content?
     private async updateHeight(): Promise<void> {
         // wait until user has stopped scrolling
@@ -751,8 +767,7 @@ export default class ScrollPanel extends React.Component<IProps> {
         const minHeight = sn.clientHeight;
         const height = Math.max(minHeight, contentHeight);
         this.pages = Math.ceil(height / PAGE_SIZE);
-        const displayScrollbar = contentHeight > minHeight;
-        sn.dataset.scrollbar = displayScrollbar.toString();
+        this.setDataScrollbar(contentHeight);
         this.bottomGrowth = 0;
         const newHeight = `${this.getListHeight()}px`;