From 84b2c0447ee108fbb630e2b2c8898be20da1bc95 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Thu, 28 Feb 2019 07:57:59 -0800
Subject: [PATCH] Fixed right side scrollbar margin on dashboard page

---
 .../src/components/CustomScrollbar/CustomScrollbar.tsx     | 4 ++--
 public/app/features/dashboard/containers/DashboardPage.tsx | 7 ++++++-
 .../containers/__snapshots__/DashboardPage.test.tsx.snap   | 2 ++
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx b/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx
index d52d2fea80d..61fc584c7ca 100644
--- a/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx
+++ b/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx
@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import React, { Component } from 'react';
 import isNil from 'lodash/isNil';
 import classNames from 'classnames';
 import Scrollbars from 'react-custom-scrollbars';
@@ -20,7 +20,7 @@ interface Props {
 /**
  * Wraps component into <Scrollbars> component from `react-custom-scrollbars`
  */
-export class CustomScrollbar extends PureComponent<Props> {
+export class CustomScrollbar extends Component<Props> {
   static defaultProps: Partial<Props> = {
     autoHide: false,
     autoHideTimeout: 200,
diff --git a/public/app/features/dashboard/containers/DashboardPage.tsx b/public/app/features/dashboard/containers/DashboardPage.tsx
index c52774f7e0e..ce2d3fa74df 100644
--- a/public/app/features/dashboard/containers/DashboardPage.tsx
+++ b/public/app/features/dashboard/containers/DashboardPage.tsx
@@ -268,7 +268,12 @@ export class DashboardPage extends PureComponent<Props, State> {
           onAddPanel={this.onAddPanel}
         />
         <div className="scroll-canvas scroll-canvas--dashboard">
-          <CustomScrollbar autoHeightMin={'100%'} setScrollTop={this.setScrollTop} scrollTop={scrollTop}>
+          <CustomScrollbar
+            autoHeightMin={'100%'}
+            setScrollTop={this.setScrollTop}
+            scrollTop={scrollTop}
+            className="custom-scrollbar--page"
+          >
             {editview && <DashboardSettings dashboard={dashboard} />}
 
             {initError && this.renderInitFailedState()}
diff --git a/public/app/features/dashboard/containers/__snapshots__/DashboardPage.test.tsx.snap b/public/app/features/dashboard/containers/__snapshots__/DashboardPage.test.tsx.snap
index fec0e18c349..0e3720bada0 100644
--- a/public/app/features/dashboard/containers/__snapshots__/DashboardPage.test.tsx.snap
+++ b/public/app/features/dashboard/containers/__snapshots__/DashboardPage.test.tsx.snap
@@ -109,6 +109,7 @@ exports[`DashboardPage Dashboard init completed  Should render dashboard grid 1`
       autoHide={false}
       autoHideDuration={200}
       autoHideTimeout={200}
+      className="custom-scrollbar--page"
       hideTracksWhenNotNeeded={false}
       scrollTop={0}
       setScrollTop={[Function]}
@@ -344,6 +345,7 @@ exports[`DashboardPage When dashboard has editview url state should render setti
       autoHide={false}
       autoHideDuration={200}
       autoHideTimeout={200}
+      className="custom-scrollbar--page"
       hideTracksWhenNotNeeded={false}
       scrollTop={0}
       setScrollTop={[Function]}