Merge pull request #15560 from grafana/scrollbar-fixes

Fixed scrollbar issue introduced in theme changes

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