From 58a697f81a9b97fbda9f77c3f35ca2d157c40f27 Mon Sep 17 00:00:00 2001
From: Qstick <qstick@gmail.com>
Date: Mon, 21 Nov 2022 19:45:19 -0600
Subject: [PATCH] Improve page scrollbar

Fixed: Scrolling in Firefox in small window (requires refresh)
New: Style scrollbar in Firefox
Fixed: Scrolling with click and drag
Fixes #3088
Fixes #2706
---
 .../src/Components/Form/EnhancedSelectInput.js  |  2 +-
 frontend/src/Components/Modal/Modal.js          |  2 +-
 frontend/src/Components/Page/PageContentBody.js | 17 ++---------------
 frontend/src/Components/Tooltip/Tooltip.js      |  2 +-
 frontend/src/Styles/Mixins/scroller.css         |  3 +++
 .../src/Utilities/{mobile.js => browser.js}     |  4 ++++
 6 files changed, 12 insertions(+), 18 deletions(-)
 rename frontend/src/Utilities/{mobile.js => browser.js} (69%)

diff --git a/frontend/src/Components/Form/EnhancedSelectInput.js b/frontend/src/Components/Form/EnhancedSelectInput.js
index fd8e48b9b..709eb740c 100644
--- a/frontend/src/Components/Form/EnhancedSelectInput.js
+++ b/frontend/src/Components/Form/EnhancedSelectInput.js
@@ -12,9 +12,9 @@ import ModalBody from 'Components/Modal/ModalBody';
 import Portal from 'Components/Portal';
 import Scroller from 'Components/Scroller/Scroller';
 import { icons, scrollDirections, sizes } from 'Helpers/Props';
+import { isMobile as isMobileUtil } from 'Utilities/browser';
 import * as keyCodes from 'Utilities/Constants/keyCodes';
 import getUniqueElememtId from 'Utilities/getUniqueElementId';
-import { isMobile as isMobileUtil } from 'Utilities/mobile';
 import HintedSelectInputOption from './HintedSelectInputOption';
 import HintedSelectInputSelectedValue from './HintedSelectInputSelectedValue';
 import TextInput from './TextInput';
diff --git a/frontend/src/Components/Modal/Modal.js b/frontend/src/Components/Modal/Modal.js
index 6868d70b3..2a0e56fa7 100644
--- a/frontend/src/Components/Modal/Modal.js
+++ b/frontend/src/Components/Modal/Modal.js
@@ -6,9 +6,9 @@ import ReactDOM from 'react-dom';
 import FocusLock from 'react-focus-lock';
 import ErrorBoundary from 'Components/Error/ErrorBoundary';
 import { sizes } from 'Helpers/Props';
+import { isIOS } from 'Utilities/browser';
 import * as keyCodes from 'Utilities/Constants/keyCodes';
 import getUniqueElememtId from 'Utilities/getUniqueElementId';
-import { isIOS } from 'Utilities/mobile';
 import { setScrollLock } from 'Utilities/scrollLock';
 import ModalError from './ModalError';
 import styles from './Modal.css';
diff --git a/frontend/src/Components/Page/PageContentBody.js b/frontend/src/Components/Page/PageContentBody.js
index 69b6c79d5..1c93e575b 100644
--- a/frontend/src/Components/Page/PageContentBody.js
+++ b/frontend/src/Components/Page/PageContentBody.js
@@ -1,23 +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 { isMobile as isMobileUtil } from 'Utilities/mobile';
 import { isLocked } from 'Utilities/scrollLock';
 import styles from './PageContentBody.css';
 
 class PageContentBody extends Component {
 
-  //
-  // Lifecycle
-
-  constructor(props, context) {
-    super(props, context);
-
-    this._isMobile = isMobileUtil();
-  }
-
   //
   // Listeners
 
@@ -41,10 +30,8 @@ class PageContentBody extends Component {
       ...otherProps
     } = this.props;
 
-    const ScrollerComponent = this._isMobile ? Scroller : OverlayScroller;
-
     return (
-      <ScrollerComponent
+      <Scroller
         className={className}
         scrollDirection={scrollDirections.VERTICAL}
         {...otherProps}
@@ -53,7 +40,7 @@ class PageContentBody extends Component {
         <div className={innerClassName}>
           {children}
         </div>
-      </ScrollerComponent>
+      </Scroller>
     );
   }
 }
diff --git a/frontend/src/Components/Tooltip/Tooltip.js b/frontend/src/Components/Tooltip/Tooltip.js
index 1867efe68..1499e7451 100644
--- a/frontend/src/Components/Tooltip/Tooltip.js
+++ b/frontend/src/Components/Tooltip/Tooltip.js
@@ -5,7 +5,7 @@ import { Manager, Popper, Reference } from 'react-popper';
 import Portal from 'Components/Portal';
 import { kinds, tooltipPositions } from 'Helpers/Props';
 import dimensions from 'Styles/Variables/dimensions';
-import { isMobile as isMobileUtil } from 'Utilities/mobile';
+import { isMobile as isMobileUtil } from 'Utilities/browser';
 import styles from './Tooltip.css';
 
 let maxWidth = null;
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;
diff --git a/frontend/src/Utilities/mobile.js b/frontend/src/Utilities/browser.js
similarity index 69%
rename from frontend/src/Utilities/mobile.js
rename to frontend/src/Utilities/browser.js
index e52975963..ff896e801 100644
--- a/frontend/src/Utilities/mobile.js
+++ b/frontend/src/Utilities/browser.js
@@ -10,3 +10,7 @@ export function isMobile() {
 export function isIOS() {
   return mobileDetect.is('iOS');
 }
+
+export function isFirefox() {
+  return window.navigator.userAgent.toLowerCase().indexOf('firefox/') >= 0;
+}