scrollbar: fix graph legend height

public/app/plugins/panel/graph/legend.ts

@@ -238,10 +238,10 @@ module.directive('graphLegend', function(popoverSrv, $timeout) {
           tbodyElem.append(tableHeaderElem);
           tbodyElem.append(tableHeaderElem);
           tbodyElem.append(seriesElements);
           tbodyElem.append(seriesElements);
           elem.append(tbodyElem);
           elem.append(tbodyElem);
-          tbodyElem.wrap('<div class="graph-legend-content"></div>');
+          tbodyElem.wrap('<div class="graph-legend-scroll"></div>');
         } else {
         } else {
-          elem.append('<div class="graph-legend-content"></div>');
-          elem.find('.graph-legend-content').append(seriesElements);
+          elem.append('<div class="graph-legend-scroll"></div>');
+          elem.find('.graph-legend-scroll').append(seriesElements);
         }
         }
 
 
         if (!panel.legend.rightSide || (panel.legend.rightSide && legendWidth !== legendRightDefaultWidth)) {
         if (!panel.legend.rightSide || (panel.legend.rightSide && legendWidth !== legendRightDefaultWidth)) {
@@ -261,7 +261,7 @@ module.directive('graphLegend', function(popoverSrv, $timeout) {
         `;
         `;
 
 
         let scrollRoot = elem;
         let scrollRoot = elem;
-        let scroller = elem.find('.graph-legend-content');
+        let scroller = elem.find('.graph-legend-scroll');
 
 
         // clear existing scroll bar track to prevent duplication
         // clear existing scroll bar track to prevent duplication
         scrollRoot.find('.baron__track').remove();
         scrollRoot.find('.baron__track').remove();

public/app/plugins/panel/graph/template.ts

@@ -3,7 +3,9 @@ var template = `
   <div class="graph-panel__chart" grafana-graph ng-dblclick="ctrl.zoomOut()">
   <div class="graph-panel__chart" grafana-graph ng-dblclick="ctrl.zoomOut()">
   </div>
   </div>
 
 
-  <div class="graph-legend" graph-legend></div>
+  <div class="graph-legend">
+    <div class="graph-legend-content" graph-legend></div>
+  </div>
 </div>
 </div>
 `;
 `;
 
 

public/sass/components/_panel_graph.scss

@@ -49,6 +49,7 @@
 }
 }
 
 
 .graph-legend {
 .graph-legend {
+  display: flex;
   flex: 0 1 auto;
   flex: 0 1 auto;
   max-height: 30%;
   max-height: 30%;
   margin: 0;
   margin: 0;
@@ -56,7 +57,8 @@
   padding-top: 6px;
   padding-top: 6px;
   position: relative;
   position: relative;
 
 
-  height: 100%;
+  // fix for Firefox (white stripe on the right of scrollbar)
+  width: 99%;
 
 
   .popover-content {
   .popover-content {
     padding: 0;
     padding: 0;
@@ -67,6 +69,10 @@
   position: relative;
   position: relative;
 }
 }
 
 
+.graph-legend-scroll {
+  position: relative;
+}
+
 .graph-legend-icon {
 .graph-legend-icon {
   position: relative;
   position: relative;
   padding-right: 4px;
   padding-right: 4px;

public/sass/components/_scrollbar.scss

@@ -192,12 +192,12 @@
 
 
   // Width needs to be set to prevent content width issues
   // 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)
   // Set to 99% instead of 100% for fixing Firefox issue (white stripe on the right of scrollbar)
-  min-width: 99%;
+  width: 99%;
 }
 }
 
 
 // Fix for side menu on mobile devices
 // Fix for side menu on mobile devices
 .main-view.baron {
 .main-view.baron {
-  min-width: unset;
+  width: unset;
 }
 }
 
 
 .baron__clipper {
 .baron__clipper {