Fix ScrollPanel data-scrollbar not responding to window resizing (#7841)

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;

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`;