Merge pull request #15560 from grafana/scrollbar-fixes

Fixed scrollbar issue introduced in theme changes

packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx

 import React, { PureComponent } from 'react';
 import _ from 'lodash';
+import classNames from 'classnames';
 import Scrollbars from 'react-custom-scrollbars';
 
 interface Props {
-  customClassName?: string;
+  className?: string;
   autoHide?: boolean;
   autoHideTimeout?: number;
   autoHideDuration?: number;
@@ -21,7 +22,6 @@ interface Props {
  */
 export class CustomScrollbar extends PureComponent<Props> {
   static defaultProps: Partial<Props> = {
-    customClassName: 'custom-scrollbars',
     autoHide: false,
     autoHideTimeout: 200,
     autoHideDuration: 200,
@@ -60,7 +60,7 @@ export class CustomScrollbar extends PureComponent<Props> {
 
   render() {
     const {
-      customClassName,
+      className,
       children,
       autoHeightMax,
       autoHeightMin,
@@ -75,7 +75,7 @@ export class CustomScrollbar extends PureComponent<Props> {
     return (
       <Scrollbars
         ref={this.ref}
-        className={customClassName}
+        className={classNames('custom-scrollbar', className)}
         onScroll={setScrollTop}
         autoHeight={true}
         autoHide={autoHide}

packages/grafana-ui/src/components/CustomScrollbar/_CustomScrollbar.scss

-.custom-scrollbars {
+.custom-scrollbar {
   // Fix for Firefox. For some reason sometimes .view container gets a height of its content, but in order to
   // make scroll working it should fit outer container size (scroll appears only when inner container size is
   // greater than outer one).
@@ -37,4 +37,11 @@
     @include gradient-horizontal($scrollbarBackground, $scrollbarBackground2);
     border-radius: 6px;
   }
+
+  // page scrollbar should stick to left side to aid hitting it
+  &--page {
+    .track-vertical {
+      right: 0;
+    }
+  }
 }

public/app/core/components/Page/Page.tsx

@@ -48,7 +48,7 @@ class Page extends Component<Props> {
     const { buildInfo } = config;
     return (
       <div className="page-scrollbar-wrapper">
-        <CustomScrollbar autoHeightMin={'100%'}>
+        <CustomScrollbar autoHeightMin={'100%'} className="custom-scrollbar--page">
           <div className="page-scrollbar-content">
             <PageHeader model={navModel} />
             {this.props.children}

public/app/features/explore/Wrapper.tsx

@@ -53,7 +53,7 @@ export class Wrapper extends Component<WrapperProps> {
 
     return (
       <div className="page-scrollbar-wrapper">
-        <CustomScrollbar autoHeightMin={'100%'}>
+        <CustomScrollbar autoHeightMin={'100%'} className="custom-scrollbar--page">
           <div className="explore-wrapper">
             <ErrorBoundary>
               <Explore exploreId={ExploreId.left} urlState={leftState} />

public/sass/_variables.dark.scss

@@ -144,9 +144,9 @@ $list-item-shadow: $card-shadow;
 $empty-list-cta-bg: $gray-blue;
 
 // Scrollbars
-$scrollbarBackground: $dark-9;
-$scrollbarBackground2: $dark-9;
-$scrollbarBorder: $dark-10;
+$scrollbarBackground: #404357;
+$scrollbarBackground2: $dark-10;
+$scrollbarBorder: black;
 
 // Tables
 // -------------------------

public/sass/_variables.light.scss

@@ -131,7 +131,7 @@ $empty-list-cta-bg: $gray-6;
 // Scrollbars
 $scrollbarBackground: $gray-4;
 $scrollbarBackground2: $gray-4;
-$scrollbarBorder: $gray-3;
+$scrollbarBorder: $gray-7;
 
 // Tables
 // -------------------------

public/sass/components/_footer.scss

@@ -42,7 +42,7 @@
   display: none;
 }
 
-.is-react .custom-scrollbars .footer {
+.is-react .custom-scrollbar .footer {
   display: block;
 }