From 7d105439f924f2923895ff7b3ca488eee092083b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Thu, 21 Feb 2019 09:41:53 +0100
Subject: [PATCH] Fixed scrollbar issue introduced in theme changes

---
 .../src/components/CustomScrollbar/CustomScrollbar.tsx   | 8 ++++----
 .../src/components/CustomScrollbar/_CustomScrollbar.scss | 9 ++++++++-
 public/app/core/components/Page/Page.tsx                 | 2 +-
 public/app/features/explore/Wrapper.tsx                  | 2 +-
 public/sass/_variables.dark.scss                         | 6 +++---
 public/sass/_variables.light.scss                        | 2 +-
 public/sass/components/_footer.scss                      | 2 +-
 7 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx b/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx
index 40f6c6c3c37..39bae62e28b 100644
--- a/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx
+++ b/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx
@@ -1,9 +1,10 @@
 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}
diff --git a/packages/grafana-ui/src/components/CustomScrollbar/_CustomScrollbar.scss b/packages/grafana-ui/src/components/CustomScrollbar/_CustomScrollbar.scss
index f5adcedf0fe..59459788218 100644
--- a/packages/grafana-ui/src/components/CustomScrollbar/_CustomScrollbar.scss
+++ b/packages/grafana-ui/src/components/CustomScrollbar/_CustomScrollbar.scss
@@ -1,4 +1,4 @@
-.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;
+    }
+  }
 }
diff --git a/public/app/core/components/Page/Page.tsx b/public/app/core/components/Page/Page.tsx
index fe518d8f891..1803317a8da 100644
--- a/public/app/core/components/Page/Page.tsx
+++ b/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}
diff --git a/public/app/features/explore/Wrapper.tsx b/public/app/features/explore/Wrapper.tsx
index 35d09cfd9bb..add2ffed235 100644
--- a/public/app/features/explore/Wrapper.tsx
+++ b/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} />
diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss
index 46b6c923f0a..e491df83ea4 100644
--- a/public/sass/_variables.dark.scss
+++ b/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
 // -------------------------
diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss
index 94c2134313f..ffc67a735f5 100644
--- a/public/sass/_variables.light.scss
+++ b/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
 // -------------------------
diff --git a/public/sass/components/_footer.scss b/public/sass/components/_footer.scss
index b5617f4e387..88e5b1521f3 100644
--- a/public/sass/components/_footer.scss
+++ b/public/sass/components/_footer.scss
@@ -42,7 +42,7 @@
   display: none;
 }
 
-.is-react .custom-scrollbars .footer {
+.is-react .custom-scrollbar .footer {
   display: block;
 }