Improve page scrollbar

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

Closes #5189

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>
     );
   }
 }

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;