scrollable panels works better with perfect-scrollbar

package.json

@@ -117,6 +117,8 @@
     "brace": "^0.10.0",
     "classnames": "^2.2.5",
     "clipboard": "^1.7.1",
+    "d3": "^4.11.0",
+    "d3-scale-chromatic": "^1.1.1",
     "eventemitter3": "^2.0.2",
     "file-saver": "^1.3.3",
     "gemini-scrollbar": "https://github.com/grafana/gemini-scrollbar#grafana",
@@ -125,6 +127,7 @@
     "moment": "^2.18.1",
     "mousetrap": "^1.6.0",
     "ngreact": "^0.4.1",
+    "perfect-scrollbar": "^1.2.0",
     "prop-types": "^15.6.0",
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
@@ -134,8 +137,6 @@
     "rxjs": "^5.4.3",
     "tether": "^1.4.0",
     "tether-drop": "https://github.com/torkelo/drop",
-    "tinycolor2": "^1.4.1",
-    "d3": "^4.11.0",
-    "d3-scale-chromatic": "^1.1.1"
+    "tinycolor2": "^1.4.1"
   }
 }

public/app/features/panel/panel_ctrl.ts

@@ -6,7 +6,7 @@ import Remarkable from 'remarkable';
 import {GRID_CELL_HEIGHT, GRID_CELL_VMARGIN} from 'app/core/constants';
 
 const TITLE_HEIGHT = 27;
-const PANEL_BORDER = 12;
+const PANEL_BORDER = 2;
 
 import {Emitter} from 'app/core/core';
 
@@ -172,16 +172,7 @@ export class PanelCtrl {
       this.containerHeight = this.panel.gridPos.h * GRID_CELL_HEIGHT + ((this.panel.gridPos.h-1) * GRID_CELL_VMARGIN);
     }
 
-    console.log(this.containerHeight);
     this.height = this.containerHeight - (PANEL_BORDER + TITLE_HEIGHT);
-    console.log(PANEL_BORDER + TITLE_HEIGHT);
-  }
-
-  setPanelHeight() {
-    // console.log('setPanelHeight');
-    // if (this.$scope.setPanelHeight) {
-    //   this.$scope.setPanelHeight();
-    // }
   }
 
   render(payload?) {

public/app/features/panel/panel_directive.ts

@@ -1,6 +1,6 @@
 import angular from 'angular';
 import Drop from 'tether-drop';
-import GeminiScrollbar from 'gemini-scrollbar';
+import PerfectScrollbar from 'perfect-scrollbar';
 
 var module = angular.module('grafana.directives');
 
@@ -86,6 +86,7 @@ module.directive('grafanaPanel', function($rootScope, $document) {
       }
 
       function panelHeightUpdated() {
+        panelContent.height(ctrl.height);
         if (panelScrollbar) {
           panelScrollbar.update();
         }
@@ -98,14 +99,13 @@ module.directive('grafanaPanel', function($rootScope, $document) {
         panelContainer.addClass('panel-transparent', true);
       }
 
-      if (ctrl.__proto__.constructor.scrollable) {
-        panelContent.addClass('panel-content--scrollable');
-        panelScrollbar = new GeminiScrollbar({ autoshow: false, element: panelContent[0] }).create();
-      }
-
       // update scrollbar after mounting
       ctrl.events.on('component-did-mount', () => {
-        panelHeightUpdated();
+        if (ctrl.__proto__.constructor.scrollable) {
+          panelScrollbar = new PerfectScrollbar(panelContent[0], {
+            minScrollbarLength: 20
+          });
+        }
       });
 
       ctrl.events.on('render', () => {

public/sass/components/_scrollbar.scss

@@ -1,3 +1,5 @@
+@import "~perfect-scrollbar/css/perfect-scrollbar.css";
+
 /**
  * gemini-scrollbar
  * @version 1.5.2

public/sass/pages/_dashboard.scss

@@ -44,11 +44,8 @@ div.flot-text {
 .panel-content {
   padding: 0px 10px 5px 10px;
   height: calc(100% - 27px);
-
-  &--scrollable {
-    // Add space for scrollbar
-    padding-right: 10px;
-  }
+  position: relative;
+  overflow: hidden;
 }
 
 .panel-title-container {

yarn.lock

@@ -6955,6 +6955,10 @@ pend@~1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50"
 
+perfect-scrollbar@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/perfect-scrollbar/-/perfect-scrollbar-1.2.0.tgz#ad23a2529c17f4535f21d1486f8bc3046e31a9d2"
+
 performance-now@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-0.2.0.tgz#33ef30c5c77d4ea21c5a53869d91b56d8f2555e5"