Merge branch 'fix-11053' of https://github.com/alexanderzobnin/grafana into alexanderzobnin-fix-11053

public/app/core/components/scroll/scroll.ts

@@ -77,7 +77,6 @@ export function geminiScrollbar() {
       });
 
       scope.$on('$destroy', () => {
-        // scrollbar.destroy();
         scrollbar.dispose();
       });
     },

public/app/features/dashboard/dashgrid/AddPanelPanel.tsx

@@ -103,7 +103,7 @@ export class AddPanelPanel extends React.Component<AddPanelPanelProps, AddPanelP
 
   render() {
     return (
-      <div className="panel-container">
+      <div className="panel-container add-panel-container">
         <div className="add-panel">
           <div className="add-panel__header">
             <i className="gicon gicon-add-panel" />

public/app/features/panel/panel_directive.ts

@@ -125,6 +125,8 @@ module.directive('grafanaPanel', function($rootScope, $document, $timeout) {
             barOnCls: '_scrollbar',
             scrollingCls: '_scrolling',
           });
+
+          panelScrollbar.scroll();
         }
       });
 

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() {

public/sass/components/_panel_add_panel.scss

@@ -1,3 +1,7 @@
+.add-panel-container {
+  height: 100%;
+}
+
 .add-panel {
   height: 100%;
 

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 {

public/sass/components/_scrollbar.scss

@@ -187,12 +187,8 @@
 // Baron styles
 
 .baron {
-  display: inline-block;
+  // display: inline-block; // this brakes phantomjs rendering (width becomes 0)
   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;