scrollbar: fix legend rendering issues

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

@@ -238,8 +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>');
         } else {
         } else {
-          elem.append(seriesElements);
+          elem.append('<div class="graph-legend-content"></div>');
+          elem.find('.graph-legend-content').append(seriesElements);
         }
         }
 
 
         if (!panel.legend.rightSide || (panel.legend.rightSide && legendWidth !== legendRightDefaultWidth)) {
         if (!panel.legend.rightSide || (panel.legend.rightSide && legendWidth !== legendRightDefaultWidth)) {
@@ -258,25 +260,16 @@ module.directive('graphLegend', function(popoverSrv, $timeout) {
           </div>
           </div>
         `;
         `;
 
 
-        let scrollRoot = elem.parent();
-        // let scroller = elem.find(':first-child').first();
-        let scroller = elem;
+        let scrollRoot = elem;
+        let scroller = elem.find('.graph-legend-content');
 
 
         // clear existing scroll bar track to prevent duplication
         // clear existing scroll bar track to prevent duplication
-        elem
-          .parent()
-          .find('.baron__track')
-          .remove();
+        scrollRoot.find('.baron__track').remove();
 
 
         scrollRoot.addClass(scrollRootClass);
         scrollRoot.addClass(scrollRootClass);
         $(scrollBarHTML).appendTo(scrollRoot);
         $(scrollBarHTML).appendTo(scrollRoot);
         scroller.addClass(scrollerClass);
         scroller.addClass(scrollerClass);
 
 
-        // Fix .graph-legend-content max-height
-        // Couldn't find how to do it via CSS
-        const legendHeight = scrollRoot.height();
-        elem.css('max-height', legendHeight);
-
         let scrollbarParams = {
         let scrollbarParams = {
           root: scrollRoot[0],
           root: scrollRoot[0],
           scroller: scroller[0],
           scroller: scroller[0],

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

@@ -3,9 +3,7 @@ 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">
-    <div class="graph-legend-content" graph-legend></div>
-  </div>
+  <div class="graph-legend" graph-legend></div>
 </div>
 </div>
 `;
 `;
 
 

public/sass/components/_panel_graph.scss

@@ -53,9 +53,11 @@
   max-height: 30%;
   max-height: 30%;
   margin: 0;
   margin: 0;
   text-align: center;
   text-align: center;
-  // padding-top: 6px;
+  padding-top: 6px;
   position: relative;
   position: relative;
 
 
+  height: 100%;
+
   .popover-content {
   .popover-content {
     padding: 0;
     padding: 0;
   }
   }
@@ -63,7 +65,6 @@
 
 
 .graph-legend-content {
 .graph-legend-content {
   position: relative;
   position: relative;
-  padding-top: 6px;
 }
 }
 
 
 .graph-legend-icon {
 .graph-legend-icon {
@@ -129,9 +130,9 @@
 .graph-legend-table {
 .graph-legend-table {
   tbody {
   tbody {
     display: block;
     display: block;
+    position: relative;
     overflow-y: auto;
     overflow-y: auto;
     overflow-x: hidden;
     overflow-x: hidden;
-    height: 100%;
     padding-bottom: 1px;
     padding-bottom: 1px;
     padding-right: 5px;
     padding-right: 5px;
     padding-left: 5px;
     padding-left: 5px;