removing gemini scrollbar and replacing with perfect scrollbar, muuuch better

package.json

@@ -121,7 +121,6 @@
     "d3-scale-chromatic": "^1.1.1",
     "eventemitter3": "^2.0.2",
     "file-saver": "^1.3.3",
-    "gemini-scrollbar": "https://github.com/grafana/gemini-scrollbar#grafana",
     "jquery": "^3.2.1",
     "lodash": "^4.17.4",
     "moment": "^2.18.1",

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

@@ -1,20 +1,20 @@
-import GeminiScrollbar from 'gemini-scrollbar';
+import PerfectScrollbar from 'perfect-scrollbar';
 import coreModule from 'app/core/core_module';
 
 export function geminiScrollbar() {
   return {
     restrict: 'A',
     link: function(scope, elem, attrs) {
-      var myScrollbar = new GeminiScrollbar({
-        autoshow: false,
-        element: elem[0]
-      }).create();
+
+      let scrollbar = new PerfectScrollbar(elem[0]);
+      console.log('scrllbar!');
 
       scope.$on('$destroy', () => {
-        myScrollbar.destroy();
+        scrollbar.destroy();
       });
+
     }
   };
 }
 
-coreModule.directive('geminiScrollbar', geminiScrollbar);
+coreModule.directive('grafanaScrollbar', geminiScrollbar);

public/app/core/components/search/search.html

@@ -40,51 +40,49 @@
 	</div>
 
 	<div class="search-dropdown" ng-class="{'search-dropdown--fade-in': ctrl.openCompleted}">
-		<div gemini-scrollbar>
-			<div class="search-results-container" ng-if="ctrl.tagsMode">
-				<div ng-repeat="tag in ctrl.results" class="pointer" style="width: 180px; float: left;"
-																												 ng-class="{'selected': $index === ctrl.selectedIndex }"
-														 ng-click="ctrl.filterByTag(tag.term, $event)">
-					<a class="search-result-tag label label-tag" tag-color-from-name="tag.term">
-						<i class="fa fa-tag"></i>
-						<span>{{tag.term}} &nbsp;({{tag.count}})</span>
-					</a>
-				</div>
+		<div class="search-results-container" ng-if="ctrl.tagsMode">
+			<div ng-repeat="tag in ctrl.results" class="pointer" style="width: 180px; float: left;"
+																												ng-class="{'selected': $index === ctrl.selectedIndex }"
+														ng-click="ctrl.filterByTag(tag.term, $event)">
+				<a class="search-result-tag label label-tag" tag-color-from-name="tag.term">
+					<i class="fa fa-tag"></i>
+					<span>{{tag.term}} &nbsp;({{tag.count}})</span>
+				</a>
 			</div>
+		</div>
 
-			<div class="search-results-container" ng-if="!ctrl.tagsMode">
-				<h6 ng-hide="ctrl.results.length">No dashboards matching your query were found.</h6>
+		<div class="search-results-container" ng-if="!ctrl.tagsMode" grafana-scrollbar>
+			<h6 ng-hide="ctrl.results.length">No dashboards matching your query were found.</h6>
 
-				<div ng-repeat="section in ctrl.results" class="search-section">
-					<a class="search-section__header pointer" ng-hide="section.hideHeader" ng-click="ctrl.toggleFolder(section)">
-						<i class="search-section__header__icon" ng-class="section.icon"></i>
-						<span class="search-section__header__text">{{::section.title}}</span>
-						<i class="fa fa-minus search-section__header__toggle" ng-show="section.expanded"></i>
-						<i class="fa fa-plus search-section__header__toggle" ng-hide="section.expanded"></i>
-					</a>
+			<div ng-repeat="section in ctrl.results" class="search-section">
+				<a class="search-section__header pointer" ng-hide="section.hideHeader" ng-click="ctrl.toggleFolder(section)">
+					<i class="search-section__header__icon" ng-class="section.icon"></i>
+					<span class="search-section__header__text">{{::section.title}}</span>
+					<i class="fa fa-minus search-section__header__toggle" ng-show="section.expanded"></i>
+					<i class="fa fa-plus search-section__header__toggle" ng-hide="section.expanded"></i>
+				</a>
 
-					<div ng-if="section.expanded">
-						<a ng-repeat="item in section.items" class="search-item" ng-class="{'selected': item.selected}" ng-href="{{::item.url}}">
-							<span class="search-item__icon">
-								<i class="fa fa-th-large"></i>
+				<div ng-if="section.expanded">
+					<a ng-repeat="item in section.items" class="search-item" ng-class="{'selected': item.selected}" ng-href="{{::item.url}}">
+						<span class="search-item__icon">
+							<i class="fa fa-th-large"></i>
+						</span>
+						<span class="search-item__body">
+							<div class="search-item__body-title">{{::item.title}}</div>
+							<div class="search-item__body-sub-title" ng-show="item.folderTitle && section.hideHeader">
+								<i class="fa fa-folder-o"></i>
+								{{::item.folderTitle}}
+							</div>
+						</span>
+						<span class="search-item__tags">
+							<span ng-click="ctrl.filterByTag(tag, $event)" ng-repeat="tag in item.tags" tag-color-from-name="tag"  class="label label-tag">
+								{{tag}}
 							</span>
-							<span class="search-item__body">
-								<div class="search-item__body-title">{{::item.title}}</div>
-								<div class="search-item__body-sub-title" ng-show="item.folderTitle && section.hideHeader">
-									<i class="fa fa-folder-o"></i>
-									{{::item.folderTitle}}
-								</div>
-							</span>
-							<span class="search-item__tags">
-								<span ng-click="ctrl.filterByTag(tag, $event)" ng-repeat="tag in item.tags" tag-color-from-name="tag"  class="label label-tag">
-									{{tag}}
-								</span>
-							</span>
-							<span class="search-item__actions">
-								<i class="fa" ng-class="{'fa-star': item.isStarred, 'fa-star-o': !item.isStarred}"></i>
-							</span>
-						</a>
-					</div>
+						</span>
+						<span class="search-item__actions">
+							<i class="fa" ng-class="{'fa-star': item.isStarred, 'fa-star-o': !item.isStarred}"></i>
+						</span>
+					</a>
 				</div>
 			</div>
 		</div>
@@ -95,4 +93,5 @@
 			</a>
 		</div>
 	</div>
+</div>
 

public/app/features/admin/partials/configuration_home.html

@@ -1,35 +1,33 @@
-<div class="scroll-canvas">
-  <div gemini-scrollbar>
-    <navbar model="ctrl.navModel"></navbar>
-    <div class="page-container">
-      <div class="page-header">
-        <page-h1 model="ctrl.navModel"></page-h1>
-      </div>
+<div class="scroll-canvas" grafana-scrollbar>
+	<navbar model="ctrl.navModel"></navbar>
+	<div class="page-container">
+		<div class="page-header">
+			<page-h1 model="ctrl.navModel"></page-h1>
+		</div>
 
-      <section class="card-section card-list-layout-grid">
-        <ol class="card-list" >
-          <li class="card-item-wrapper" ng-repeat="navItem in ctrl.navModel.node.children">
-            <a class="card-item" ng-href="{{::navItem.url}}">
-              <div class="card-item-header">
-                <div class="card-item-type">
-                </div>
-              </div>
-              <div class="card-item-body">
-                <figure class="card-item-figure">
-                  <i class="{{navItem.icon}}"></i>
-                </figure>
-                <div class="card-item-details">
-                  <div class="card-item-name">
-                    {{navItem.text}}
-                  </div>
-                  <div class="card-item-sub-name">
-                    {{navItem.description}}
-                  </div>
-                </div>
-              </div>
-            </a>
-          </li>
-        </ol>
-      </section>
-    </div>
-  </div>
+		<section class="card-section card-list-layout-grid">
+			<ol class="card-list" >
+				<li class="card-item-wrapper" ng-repeat="navItem in ctrl.navModel.node.children">
+					<a class="card-item" ng-href="{{::navItem.url}}">
+						<div class="card-item-header">
+							<div class="card-item-type">
+							</div>
+						</div>
+						<div class="card-item-body">
+							<figure class="card-item-figure">
+								<i class="{{navItem.icon}}"></i>
+							</figure>
+							<div class="card-item-details">
+								<div class="card-item-name">
+									{{navItem.text}}
+								</div>
+								<div class="card-item-sub-name">
+									{{navItem.description}}
+								</div>
+							</div>
+						</div>
+					</a>
+				</li>
+			</ol>
+		</section>
+	</div>

public/app/features/panel/panel_directive.ts

@@ -102,9 +102,7 @@ module.directive('grafanaPanel', function($rootScope, $document) {
       // update scrollbar after mounting
       ctrl.events.on('component-did-mount', () => {
         if (ctrl.__proto__.constructor.scrollable) {
-          panelScrollbar = new PerfectScrollbar(panelContent[0], {
-            minScrollbarLength: 20
-          });
+          panelScrollbar = new PerfectScrollbar(panelContent[0]);
         }
       });
 
@@ -191,6 +189,10 @@ module.directive('grafanaPanel', function($rootScope, $document) {
         if (infoDrop) {
           infoDrop.destroy();
         }
+
+        if (panelScrollbar) {
+          panelScrollbar.update();
+        }
       });
     }
   };

public/app/features/plugins/partials/ds_edit.html

@@ -1,90 +1,88 @@
-<div class="scroll-canvas">
-	<div gemini-scrollbar>
-		<navbar model="ctrl.navModel"></navbar>
-		<div class="page-container">
-			<div class="page-header">
-				<page-h1 model="ctrl.navModel"></page-h1>
+<div class="scroll-canvas" grafana-scrollbar>
+	<navbar model="ctrl.navModel"></navbar>
+	<div class="page-container">
+		<div class="page-header">
+			<page-h1 model="ctrl.navModel"></page-h1>
 
-				<div ng-if="ctrl.current.readOnly" class="grafana-info-box span8">Disclaimer. This datasource was added by config and cannot be modified using the UI. Please contact your server admin to update this datasource.</div>
+			<div ng-if="ctrl.current.readOnly" class="grafana-info-box span8">Disclaimer. This datasource was added by config and cannot be modified using the UI. Please contact your server admin to update this datasource.</div>
 
-				<div class="page-header-tabs" ng-show="ctrl.hasDashboards">
-					<ul class="gf-tabs">
-						<li class="gf-tabs-item">
-							<a class="gf-tabs-link" ng-click="ctrl.tabIndex = 0" ng-class="{active: ctrl.tabIndex === 0}">
-								Config
-							</a>
-						</li>
-						<li class="gf-tabs-item">
-							<a class="gf-tabs-link" ng-click="ctrl.tabIndex = 1" ng-class="{active: ctrl.tabIndex === 1}">
-								Dashboards
-							</a>
-						</li>
-					</ul>
-				</div>
+			<div class="page-header-tabs" ng-show="ctrl.hasDashboards">
+				<ul class="gf-tabs">
+					<li class="gf-tabs-item">
+						<a class="gf-tabs-link" ng-click="ctrl.tabIndex = 0" ng-class="{active: ctrl.tabIndex === 0}">
+							Config
+						</a>
+					</li>
+					<li class="gf-tabs-item">
+						<a class="gf-tabs-link" ng-click="ctrl.tabIndex = 1" ng-class="{active: ctrl.tabIndex === 1}">
+							Dashboards
+						</a>
+					</li>
+				</ul>
 			</div>
+		</div>
 
-			<div ng-if="ctrl.tabIndex === 0" class="tab-content">
+		<div ng-if="ctrl.tabIndex === 0" class="tab-content">
 
-				<form name="ctrl.editForm" ng-if="ctrl.current">
-					<div class="gf-form-group">
-						<div class="gf-form-inline">
-							<div class="gf-form max-width-30">
-								<span class="gf-form-label width-7">Name</span>
-								<input class="gf-form-input max-width-23" type="text" ng-model="ctrl.current.name" placeholder="name" required>
-								<info-popover offset="0px -135px" mode="right-absolute">
-									The name is used when you select the data source in panels.
-									The <em>Default</em> data source is preselected in new
-									panels.
-								</info-popover>
-							</div>
-							<gf-form-switch class="gf-form" label="Default" checked="ctrl.current.isDefault" switch-class="max-width-6"></gf-form-switch>
+			<form name="ctrl.editForm" ng-if="ctrl.current">
+				<div class="gf-form-group">
+					<div class="gf-form-inline">
+						<div class="gf-form max-width-30">
+							<span class="gf-form-label width-7">Name</span>
+							<input class="gf-form-input max-width-23" type="text" ng-model="ctrl.current.name" placeholder="name" required>
+							<info-popover offset="0px -135px" mode="right-absolute">
+								The name is used when you select the data source in panels.
+								The <em>Default</em> data source is preselected in new
+								panels.
+							</info-popover>
 						</div>
+						<gf-form-switch class="gf-form" label="Default" checked="ctrl.current.isDefault" switch-class="max-width-6"></gf-form-switch>
+					</div>
 
-						<div class="gf-form">
-							<span class="gf-form-label width-7">Type</span>
-							<div class="gf-form-select-wrapper max-width-23">
-								<select class="gf-form-input" ng-model="ctrl.current.type" ng-options="v.id as v.name for v in ctrl.types" ng-change="ctrl.userChangedType()"></select>
-							</div>
+					<div class="gf-form">
+						<span class="gf-form-label width-7">Type</span>
+						<div class="gf-form-select-wrapper max-width-23">
+							<select class="gf-form-input" ng-model="ctrl.current.type" ng-options="v.id as v.name for v in ctrl.types" ng-change="ctrl.userChangedType()"></select>
 						</div>
 					</div>
+				</div>
 
-					<div class="alert alert-info gf-form-group" ng-if="ctrl.datasourceMeta.state === 'alpha'">
-						This plugin is marked as being in alpha state, which means it is in early development phase and
-						updates will include breaking changes.
-					</div>
+				<div class="alert alert-info gf-form-group" ng-if="ctrl.datasourceMeta.state === 'alpha'">
+					This plugin is marked as being in alpha state, which means it is in early development phase and
+					updates will include breaking changes.
+				</div>
 
-					<rebuild-on-change property="ctrl.datasourceMeta.id">
-						<plugin-component type="datasource-config-ctrl">
-						</plugin-component>
-					</rebuild-on-change>
+				<rebuild-on-change property="ctrl.datasourceMeta.id">
+					<plugin-component type="datasource-config-ctrl">
+					</plugin-component>
+				</rebuild-on-change>
 
-					<div ng-if="ctrl.testing" class="gf-form-group section">
-						<h5 ng-show="!ctrl.testing.done">Testing.... <i class="fa fa-spiner fa-spin"></i></h5>
-						<div class="alert-{{ctrl.testing.status}} alert" ng-show="ctrl.testing.done">
-							<div class="alert-icon">
-								<i class="fa fa-exclamation-triangle" ng-show="ctrl.testing.status === 'error'"></i>
-								<i class="fa fa-check" ng-show="ctrl.testing.status !== 'error'"></i>
-							</div>
-							<div class="alert-body">
-								<div class="alert-title">{{ctrl.testing.message}}</div>
-							</div>
+				<div ng-if="ctrl.testing" class="gf-form-group section">
+					<h5 ng-show="!ctrl.testing.done">Testing.... <i class="fa fa-spiner fa-spin"></i></h5>
+					<div class="alert-{{ctrl.testing.status}} alert" ng-show="ctrl.testing.done">
+						<div class="alert-icon">
+							<i class="fa fa-exclamation-triangle" ng-show="ctrl.testing.status === 'error'"></i>
+							<i class="fa fa-check" ng-show="ctrl.testing.status !== 'error'"></i>
+						</div>
+						<div class="alert-body">
+							<div class="alert-title">{{ctrl.testing.message}}</div>
 						</div>
 					</div>
+				</div>
 
-					<div class="gf-form-button-row">
-						<button type="submit" class="btn btn-success" ng-disabled="ctrl.current.readOnly"  ng-click="ctrl.saveChanges()">Save</button>
-						<button type="submit" class="btn btn-danger" ng-disabled="ctrl.current.readOnly"  ng-show="!ctrl.isNew" ng-click="ctrl.delete()">
-							Delete
-						</button>
-						<a class="btn btn-link" href="datasources">Cancel</a>
-					</div>
+				<div class="gf-form-button-row">
+					<button type="submit" class="btn btn-success" ng-disabled="ctrl.current.readOnly"  ng-click="ctrl.saveChanges()">Save</button>
+					<button type="submit" class="btn btn-danger" ng-disabled="ctrl.current.readOnly"  ng-show="!ctrl.isNew" ng-click="ctrl.delete()">
+						Delete
+					</button>
+					<a class="btn btn-link" href="datasources">Cancel</a>
+				</div>
 
-					<br />
-					<br />
-					<br />
+				<br />
+				<br />
+				<br />
 
-				</form>
-			</div>
+			</form>
 		</div>
 	</div>
 </div>

public/app/features/plugins/partials/ds_list.html

@@ -1,51 +1,49 @@
-<div class="scroll-canvas">
-  <div gemini-scrollbar>
-    <navbar model="ctrl.navModel"></navbar>
-    <div class="page-container">
-      <div class="page-header">
-        <page-h1 model="ctrl.navModel"></page-h1>
+<div class="scroll-canvas" grafana-scrollbar>
+	<navbar model="ctrl.navModel"></navbar>
+	<div class="page-container">
+		<div class="page-header">
+			<page-h1 model="ctrl.navModel"></page-h1>
 
-        <a class="page-header__cta btn btn-success" href="datasources/new">
-          Add data source
-        </a>
-      </div>
+			<a class="page-header__cta btn btn-success" href="datasources/new">
+				Add data source
+			</a>
+		</div>
 
-      <section class="card-section" layout-mode>
-        <layout-selector></layout-selector>
+		<section class="card-section" layout-mode>
+			<layout-selector></layout-selector>
 
-        <ol class="card-list" >
-          <li class="card-item-wrapper" ng-repeat="ds in ctrl.datasources">
-            <a class="card-item" href="datasources/edit/{{ds.id}}/">
-              <div class="card-item-header">
-                <div class="card-item-type">
-                  {{ds.type}}
-                </div>
-              </div>
-              <div class="card-item-body">
-                <figure class="card-item-figure">
-                  <img ng-src="{{ds.typeLogoUrl}}">
-                </figure>
-                <div class="card-item-details">
-                  <div class="card-item-name">
-                    {{ds.name}}
-                    <span ng-if="ds.isDefault">
-                      <span class="btn btn-secondary btn-mini">default</span>
-                    </span>
-                  </div>
-                  <div class="card-item-sub-name">
-                    {{ds.url}}
-                  </div>
-                </div>
-              </div>
-            </a>
-          </li>
-        </ol>
-      </section>
+			<ol class="card-list" >
+				<li class="card-item-wrapper" ng-repeat="ds in ctrl.datasources">
+					<a class="card-item" href="datasources/edit/{{ds.id}}/">
+						<div class="card-item-header">
+							<div class="card-item-type">
+								{{ds.type}}
+							</div>
+						</div>
+						<div class="card-item-body">
+							<figure class="card-item-figure">
+								<img ng-src="{{ds.typeLogoUrl}}">
+							</figure>
+							<div class="card-item-details">
+								<div class="card-item-name">
+									{{ds.name}}
+									<span ng-if="ds.isDefault">
+										<span class="btn btn-secondary btn-mini">default</span>
+									</span>
+								</div>
+								<div class="card-item-sub-name">
+									{{ds.url}}
+								</div>
+							</div>
+						</div>
+					</a>
+				</li>
+			</ol>
+		</section>
 
-      <div ng-if="ctrl.datasources.length === 0">
-        <em>No data sources defined</em>
-      </div>
-    </div>
-  </div>
+		<div ng-if="ctrl.datasources.length === 0">
+			<em>No data sources defined</em>
+		</div>
+	</div>
 </div>
 

public/app/features/plugins/partials/plugin_list.html

@@ -1,68 +1,65 @@
-<div class="scroll-canvas">
-  <div gemini-scrollbar>
+<div class="scroll-canvas" grafana-scrollbar>
+	<navbar model="ctrl.navModel"></navbar>
 
-    <navbar model="ctrl.navModel"></navbar>
+	<div class="page-container">
+		<div class="page-header">
+			<h1>
+				<i class="icon-gf icon-gf-apps"></i>
+				Plugins <span class="muted small">(currently installed)</span>
+			</h1>
 
-    <div class="page-container">
-      <div class="page-header">
-        <h1>
-          <i class="icon-gf icon-gf-apps"></i>
-          Plugins <span class="muted small">(currently installed)</span>
-        </h1>
+			<div class="page-header-tabs">
+				<ul class="gf-tabs">
+					<li class="gf-tabs-item">
+						<a class="gf-tabs-link" href="plugins?type=panel" ng-class="{active: ctrl.tabIndex === 0}">
+							Panels
+						</a>
+					</li>
+					<li class="gf-tabs-item">
+						<a class="gf-tabs-link" href="plugins?type=datasource" ng-class="{active: ctrl.tabIndex === 1}">
+							Data sources
+						</a>
+					</li>
+					<li class="gf-tabs-item">
+						<a class="gf-tabs-link" href="plugins?type=app" ng-class="{active: ctrl.tabIndex === 2}">
+							Apps
+						</a>
+					</li>
+				</ul>
 
-        <div class="page-header-tabs">
-          <ul class="gf-tabs">
-            <li class="gf-tabs-item">
-              <a class="gf-tabs-link" href="plugins?type=panel" ng-class="{active: ctrl.tabIndex === 0}">
-                Panels
-              </a>
-            </li>
-            <li class="gf-tabs-item">
-              <a class="gf-tabs-link" href="plugins?type=datasource" ng-class="{active: ctrl.tabIndex === 1}">
-                Data sources
-              </a>
-            </li>
-            <li class="gf-tabs-item">
-              <a class="gf-tabs-link" href="plugins?type=app" ng-class="{active: ctrl.tabIndex === 2}">
-                Apps
-              </a>
-            </li>
-          </ul>
+				<a class="get-more-plugins-link" href="https://grafana.com/plugins?utm_source=grafana_plugin_list" target="_blank">
+					Find more <img src="public/img/icn-plugins-tiny.svg" />plugins on Grafana.com
+				</a>
+			</div>
+		</div>
 
-          <a class="get-more-plugins-link" href="https://grafana.com/plugins?utm_source=grafana_plugin_list" target="_blank">
-            Find more <img src="public/img/icn-plugins-tiny.svg" />plugins on Grafana.com
-          </a>
-        </div>
-      </div>
+		<section class="card-section" layout-mode>
+			<layout-selector></layout-selector>
 
-      <section class="card-section" layout-mode>
-        <layout-selector></layout-selector>
-
-        <ol class="card-list" >
-          <li class="card-item-wrapper" ng-repeat="plugin in ctrl.plugins">
-            <a class="card-item" href="plugins/{{plugin.id}}/edit">
-              <div class="card-item-header">
-                <div class="card-item-type">
-                  <i class="icon-gf icon-gf-{{plugin.type}}"></i>
-                  {{plugin.type}}
-                </div>
-                <div class="card-item-notice" ng-show="plugin.hasUpdate">
-                  <span bs-tooltip="plugin.latestVersion">Update available!</span>
-                </div>
-              </div>
-              <div class="card-item-body">
-                <figure class="card-item-figure">
-                  <img ng-src="{{plugin.info.logos.small}}">
-                </figure>
-                <div class="card-item-details">
-                  <div class="card-item-name">{{plugin.name}}</div>
-                  <div class="card-item-sub-name">By {{plugin.info.author.name}}</div>
-                </div>
-              </div>
-            </a>
-          </li>
-        </ol>
-      </section>
-    </div>
-  </div>
+			<ol class="card-list" >
+				<li class="card-item-wrapper" ng-repeat="plugin in ctrl.plugins">
+					<a class="card-item" href="plugins/{{plugin.id}}/edit">
+						<div class="card-item-header">
+							<div class="card-item-type">
+								<i class="icon-gf icon-gf-{{plugin.type}}"></i>
+								{{plugin.type}}
+							</div>
+							<div class="card-item-notice" ng-show="plugin.hasUpdate">
+								<span bs-tooltip="plugin.latestVersion">Update available!</span>
+							</div>
+						</div>
+						<div class="card-item-body">
+							<figure class="card-item-figure">
+								<img ng-src="{{plugin.info.logos.small}}">
+							</figure>
+							<div class="card-item-details">
+								<div class="card-item-name">{{plugin.name}}</div>
+								<div class="card-item-sub-name">By {{plugin.info.author.name}}</div>
+							</div>
+						</div>
+					</a>
+				</li>
+			</ol>
+		</section>
+	</div>
 </div>

public/app/partials/dashboard.html

@@ -1,18 +1,16 @@
 <div dash-class ng-if="ctrl.dashboard">
 	<dashnav dashboard="ctrl.dashboard"></dashnav>
 
-	<div class="scroll-canvas scroll-canvas--dashboard">
-		<div gemini-scrollbar>
-			<div dash-editor-view class="dash-edit-view"></div>
-			<div class="dashboard-container">
+	<div class="scroll-canvas scroll-canvas--dashboard" grafana-scrollbar>
+		<div dash-editor-view class="dash-edit-view"></div>
+		<div class="dashboard-container">
 
-				<dashboard-submenu ng-if="ctrl.dashboard.meta.submenuEnabled" dashboard="ctrl.dashboard">
-				</dashboard-submenu>
+			<dashboard-submenu ng-if="ctrl.dashboard.meta.submenuEnabled" dashboard="ctrl.dashboard">
+			</dashboard-submenu>
 
-				<dashboard-grid get-panel-container="ctrl.getPanelContainer">
-				</dashboard-grid>
+			<dashboard-grid get-panel-container="ctrl.getPanelContainer">
+			</dashboard-grid>
 
-			</div>
 		</div>
 	</div>
 </div>

public/sass/components/_scrollbar.scss

@@ -1,5 +1,23 @@
 @import "~perfect-scrollbar/css/perfect-scrollbar.css";
 
+.ps__rail-x:hover,
+.ps__rail-y:hover,
+.ps__rail-x:focus,
+.ps__rail-y:focus {
+  background-color: transparent;
+  opacity: 0.9;
+}
+
+.ps__thumb-y {
+  @include gradient-vertical($blue, lighten($blue, 20%));
+}
+
+.ps__rail-y:hover > .ps__thumb-y,
+.ps__rail-y:focus > .ps__thumb-y {
+  background-color: #999;
+  width: 6px;
+}
+
 /**
  * gemini-scrollbar
  * @version 1.5.2

public/sass/components/_search.scss

@@ -79,6 +79,7 @@
   height: 100%;
   display: block;
   padding: $spacer;
+  position: relative;
   flex-grow: 10;
 
   .selected {