From 9bd783d49c91600d6575fc86e7bdd56858c213f1 Mon Sep 17 00:00:00 2001
From: Mark McDowall <mark@mcdowall.ca>
Date: Sun, 13 Nov 2022 18:04:20 -0800
Subject: [PATCH] Improve page scrollbar

New: Style scrollbar in Firefox
Fixed: Scrolling with click and drag

Closes #5189
---
 .../src/Components/Page/PageContentBody.js    | 20 ++-----------------
 frontend/src/Styles/Mixins/scroller.css       |  3 +++
 2 files changed, 5 insertions(+), 18 deletions(-)

diff --git a/frontend/src/Components/Page/PageContentBody.js b/frontend/src/Components/Page/PageContentBody.js
index 47efb1a05..1c93e575b 100644
--- a/frontend/src/Components/Page/PageContentBody.js
+++ b/frontend/src/Components/Page/PageContentBody.js
@@ -1,24 +1,12 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import OverlayScroller from 'Components/Scroller/OverlayScroller';
 import Scroller from 'Components/Scroller/Scroller';
 import { scrollDirections } from 'Helpers/Props';
-import { isFirefox, isMobile } from 'Utilities/browser';
 import { isLocked } from 'Utilities/scrollLock';
 import styles from './PageContentBody.css';
 
 class PageContentBody extends Component {
 
-  //
-  // Lifecycle
-
-  constructor(props, context) {
-    super(props, context);
-
-    this._isMobile = isMobile();
-    this._isSmallScreenFirefox = isFirefox && window.innerWidth < 768;
-  }
-
   //
   // Listeners
 
@@ -42,12 +30,8 @@ class PageContentBody extends Component {
       ...otherProps
     } = this.props;
 
-    const ScrollerComponent = this._isMobile || this._isSmallScreenFirefox ?
-      Scroller :
-      OverlayScroller;
-
     return (
-      <ScrollerComponent
+      <Scroller
         className={className}
         scrollDirection={scrollDirections.VERTICAL}
         {...otherProps}
@@ -56,7 +40,7 @@ class PageContentBody extends Component {
         <div className={innerClassName}>
           {children}
         </div>
-      </ScrollerComponent>
+      </Scroller>
     );
   }
 }
diff --git a/frontend/src/Styles/Mixins/scroller.css b/frontend/src/Styles/Mixins/scroller.css
index 09d26d083..29b2016b9 100644
--- a/frontend/src/Styles/Mixins/scroller.css
+++ b/frontend/src/Styles/Mixins/scroller.css
@@ -1,4 +1,7 @@
 @define-mixin scrollbar {
+  scrollbar-color: var(--scrollbarBackgroundColor) transparent;
+  scrollbar-width: thin;
+
   &::-webkit-scrollbar {
     width: 10px;
     height: 10px;