New: Wider and taller scroll bar for the click to scrollers out there

frontend/src/Components/Scroller/OverlayScroller.css

@@ -3,7 +3,7 @@
 }
 
 .thumb {
-  min-height: 50px;
+  min-height: 100px;
   border: 1px solid transparent;
   border-radius: 5px;
   background-color: $scrollbarBackgroundColor;

frontend/src/Components/Scroller/OverlayScroller.js

@@ -4,6 +4,8 @@ import { Scrollbars } from 'react-custom-scrollbars';
 import { scrollDirections } from 'Helpers/Props';
 import styles from './OverlayScroller.css';
 
+const SCROLLBAR_SIZE = 10;
+
 class OverlayScroller extends Component {
 
   //
@@ -21,7 +23,11 @@ class OverlayScroller extends Component {
       scrollTop
     } = this.props;
 
-    if (!this._isScrolling && scrollTop != null && scrollTop !== prevProps.scrollTop) {
+    if (
+      !this._isScrolling &&
+      scrollTop != null &&
+      scrollTop !== prevProps.scrollTop
+    ) {
       this._scroller.scrollTop(scrollTop);
     }
   }
@@ -42,6 +48,42 @@ class OverlayScroller extends Component {
     );
   }
 
+  _renderTrackHorizontal = ({ style, props }) => {
+    const finalStyle = {
+      ...style,
+      right: 2,
+      bottom: 2,
+      left: 2,
+      borderRadius: 3,
+      height: SCROLLBAR_SIZE
+    };
+
+    return (
+      <div
+        style={finalStyle}
+        {...props}
+      />
+    );
+  }
+
+  _renderTrackVertical = ({ style, props }) => {
+    const finalStyle = {
+      ...style,
+      right: 2,
+      bottom: 2,
+      top: 2,
+      borderRadius: 3,
+      width: SCROLLBAR_SIZE
+    };
+
+    return (
+      <div
+        style={finalStyle}
+        {...props}
+      />
+    );
+  }
+
   _renderView = (props) => {
     return (
       <div
@@ -91,6 +133,8 @@ class OverlayScroller extends Component {
         ref={this._setScrollRef}
         autoHide={autoHide}
         hideTracksWhenNotNeeded={autoScroll}
+        renderTrackHorizontal={this._renderTrackHorizontal}
+        renderTrackVertical={this._renderTrackVertical}
         renderThumbHorizontal={this._renderThumb}
         renderThumbVertical={this._renderThumb}
         renderView={this._renderView}

frontend/src/Styles/Mixins/scroller.css

@@ -1,7 +1,7 @@
 @define-mixin scrollbar {
   &::-webkit-scrollbar {
-    width: 6px;
+    width: 10px;
-    height: 6px;
+    height: 10px;
   }
 }
 
@@ -13,7 +13,7 @@
 
 @define-mixin scrollbarThumb {
   &::-webkit-scrollbar-thumb {
-    min-height: 50px;
+    min-height: 100px;
     border: 1px solid transparent;
     border-radius: 5px;
     background-color: $scrollbarBackgroundColor;