From d3d64337b48969d7f7367f8a5122ac3410833961 Mon Sep 17 00:00:00 2001
From: Alexander Zobnin <alexanderzobnin@gmail.com>
Date: Fri, 6 Apr 2018 20:00:03 +0300
Subject: [PATCH] scrollbar: styles cleanup

---
 public/app/core/components/scroll/scroll.ts  | 1 -
 public/app/features/panel/panel_directive.ts | 2 ++
 public/app/plugins/panel/graph/legend.ts     | 5 ++---
 public/sass/components/_panel_graph.scss     | 5 ++++-
 public/sass/components/_scrollbar.scss       | 9 ++-------
 5 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/public/app/core/components/scroll/scroll.ts b/public/app/core/components/scroll/scroll.ts
index 12321bc4f5c..3f9865e6dce 100644
--- a/public/app/core/components/scroll/scroll.ts
+++ b/public/app/core/components/scroll/scroll.ts
@@ -77,7 +77,6 @@ export function geminiScrollbar() {
       });
 
       scope.$on('$destroy', () => {
-        // scrollbar.destroy();
         scrollbar.dispose();
       });
     },
diff --git a/public/app/features/panel/panel_directive.ts b/public/app/features/panel/panel_directive.ts
index 4edf293c801..90ff42f4ac6 100644
--- a/public/app/features/panel/panel_directive.ts
+++ b/public/app/features/panel/panel_directive.ts
@@ -125,6 +125,8 @@ module.directive('grafanaPanel', function($rootScope, $document, $timeout) {
             barOnCls: '_scrollbar',
             scrollingCls: '_scrolling',
           });
+
+          panelScrollbar.scroll();
         }
       });
 
diff --git a/public/app/plugins/panel/graph/legend.ts b/public/app/plugins/panel/graph/legend.ts
index f61df4d2683..752dc591147 100644
--- a/public/app/plugins/panel/graph/legend.ts
+++ b/public/app/plugins/panel/graph/legend.ts
@@ -18,9 +18,7 @@ module.directive('graphLegend', function(popoverSrv, $timeout) {
       const legendRightDefaultWidth = 10;
 
       scope.$on('$destroy', function() {
-        if (legendScrollbar) {
-          legendScrollbar.dispose();
-        }
+        destroyScrollbar();
       });
 
       ctrl.events.on('render-legend', () => {
@@ -288,6 +286,7 @@ module.directive('graphLegend', function(popoverSrv, $timeout) {
           destroyScrollbar();
           legendScrollbar = baron(scrollbarParams);
         }
+        legendScrollbar.scroll();
       }
 
       function destroyScrollbar() {
diff --git a/public/sass/components/_panel_graph.scss b/public/sass/components/_panel_graph.scss
index cc5c601e0ea..031192dd984 100644
--- a/public/sass/components/_panel_graph.scss
+++ b/public/sass/components/_panel_graph.scss
@@ -58,7 +58,7 @@
   position: relative;
 
   // fix for Firefox (white stripe on the right of scrollbar)
-  width: 99%;
+  width: calc(100% - 1px);
 
   .popover-content {
     padding: 0;
@@ -67,6 +67,9 @@
 
 .graph-legend-content {
   position: relative;
+
+  // fix for Firefox (white stripe on the right of scrollbar)
+  width: calc(100% - 1px);
 }
 
 .graph-legend-scroll {
diff --git a/public/sass/components/_scrollbar.scss b/public/sass/components/_scrollbar.scss
index 93b81fc1b4b..51e061e54b9 100644
--- a/public/sass/components/_scrollbar.scss
+++ b/public/sass/components/_scrollbar.scss
@@ -189,10 +189,6 @@
 .baron {
   display: inline-block;
   overflow: hidden;
-
-  // Width needs to be set to prevent content width issues
-  // Set to 99% instead of 100% for fixing Firefox issue (white stripe on the right of scrollbar)
-  width: 99%;
 }
 
 // Fix for side menu on mobile devices
@@ -203,7 +199,6 @@
 .baron__clipper {
   position: relative;
   overflow: hidden;
-  height: 100%;
 }
 
 .baron__scroller {
@@ -289,8 +284,8 @@
 
 .baron.panel-content--scrollable {
   // Width needs to be set to prevent content width issues
-  // Set to 99% instead of 100% for fixing Firefox issue (white stripe on the right of scrollbar)
-  width: 99%;
+  // Set to less than 100% for fixing Firefox issue (white stripe on the right of scrollbar)
+  width: calc(100% - 2px);
 
   .baron__scroller {
     padding-top: 1px;