Make CustomScrollbars rerender when content change

3 files changed, 30 insertions, 1 deletions

diff --git a/gui/package-lock.json b/gui/package-lock.json
index b71ffb2401..147bf22d71 100644
--- a/gui/package-lock.json
+++ b/gui/package-lock.json
@@ -708,6 +708,12 @@
         "@types/react": "*"
       }
     },
+    "@types/resize-observer-browser": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@types/resize-observer-browser/-/resize-observer-browser-0.1.3.tgz",
+      "integrity": "sha512-3tGjLIDH8L57fWOfC7NVn/BbGQD7pXwbkk2+8Z4hK/S7kOIv1MUN4nkKjfx0qg4ctkukjzp3Bgr/Z+Hq5ZQZTQ==",
+      "dev": true
+    },
     "@types/sinon": {
       "version": "7.0.9",
       "resolved": "https://registry.npmjs.org/@types/sinon/-/sinon-7.0.9.tgz",
diff --git a/gui/package.json b/gui/package.json
index c4a1538cd6..e0bcc15fe8 100644
--- a/gui/package.json
+++ b/gui/package.json
@@ -56,6 +56,7 @@
     "@types/react-redux": "^7.1.7",
     "@types/react-router": "^5.1.5",
     "@types/react-simple-maps": "^0.12.1",
+    "@types/resize-observer-browser": "^0.1.3",
     "@types/sinon": "^7.0.5",
     "@types/sprintf-js": "^1.1.2",
     "@types/styled-components": "^5.1.0",
diff --git a/gui/src/renderer/components/CustomScrollbars.tsx b/gui/src/renderer/components/CustomScrollbars.tsx
index 08e996c250..bc56ffcf3c 100644
--- a/gui/src/renderer/components/CustomScrollbars.tsx
+++ b/gui/src/renderer/components/CustomScrollbars.tsx
@@ -1,6 +1,14 @@
 import * as React from 'react';
+import styled from 'styled-components';
 import { Scheduler } from '../../shared/scheduler';
 
+const ScrollableContent = styled.div({
+  display: 'flex',
+  flexDirection: 'column',
+  minHeight: '100%',
+  height: 'max-content',
+});
+
 const AUTOHIDE_TIMEOUT = 1000;
 
 interface IProps {
@@ -54,10 +62,16 @@ export default class CustomScrollbars extends React.Component<IProps, IState> {
   };
 
   private scrollableRef = React.createRef<HTMLDivElement>();
+  private scrollableContentRef = React.createRef<HTMLDivElement>();
   private trackRef = React.createRef<HTMLDivElement>();
   private thumbRef = React.createRef<HTMLDivElement>();
   private autoHideScheduler = new Scheduler();
 
+  // Update scrollbar when content grows/shrinks.
+  private contentResizeObserver = new ResizeObserver(() => {
+    this.updateScrollbarsHelper({ size: true });
+  });
+
   public scrollToTop() {
     const scrollable = this.scrollableRef.current;
     if (scrollable) {
@@ -134,6 +148,10 @@ export default class CustomScrollbars extends React.Component<IProps, IState> {
     if (this.props.autoHide) {
       this.startAutoHide();
     }
+
+    if (this.scrollableContentRef.current) {
+      this.contentResizeObserver.observe(this.scrollableContentRef.current);
+    }
   }
 
   public shouldComponentUpdate(nextProps: IProps, nextState: IState) {
@@ -160,6 +178,10 @@ export default class CustomScrollbars extends React.Component<IProps, IState> {
     document.removeEventListener('mousemove', this.handleMouseMove);
     document.removeEventListener('mouseup', this.handleMouseUp);
     document.removeEventListener('mousedown', this.handleMouseDown);
+
+    if (this.scrollableContentRef.current) {
+      this.contentResizeObserver.unobserve(this.scrollableContentRef.current);
+    }
   }
 
   public componentDidUpdate() {
@@ -201,7 +223,7 @@ export default class CustomScrollbars extends React.Component<IProps, IState> {
           style={{ overflow: 'auto', flex: fillContainer ? '1' : undefined }}
           onScroll={this.onScroll}
           ref={this.scrollableRef}>
-          {children}
+          <ScrollableContent ref={this.scrollableContentRef}>{children}</ScrollableContent>
         </div>
       </div>
     );