From 74c10515ade9e41558295f3fe2c635dfdab26cb3 Mon Sep 17 00:00:00 2001
From: Alexander Zobnin <alexanderzobnin@gmail.com>
Date: Thu, 12 Apr 2018 14:22:19 +0300
Subject: [PATCH] fix right side legend rendering in phantomjs

---
 public/app/plugins/panel/graph/legend.ts |  7 ++++---
 public/sass/components/_panel_graph.scss | 16 ++++++++++++++++
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/public/app/plugins/panel/graph/legend.ts b/public/app/plugins/panel/graph/legend.ts
index 752dc591147..b668555b6a6 100644
--- a/public/app/plugins/panel/graph/legend.ts
+++ b/public/app/plugins/panel/graph/legend.ts
@@ -16,6 +16,7 @@ module.directive('graphLegend', function(popoverSrv, $timeout) {
       var i;
       var legendScrollbar;
       const legendRightDefaultWidth = 10;
+      let legendElem = elem.parent();
 
       scope.$on('$destroy', function() {
         destroyScrollbar();
@@ -110,7 +111,7 @@ module.directive('graphLegend', function(popoverSrv, $timeout) {
       }
 
       function render() {
-        let legendWidth = elem.width();
+        let legendWidth = legendElem.width();
         if (!ctrl.panel.legend.show) {
           elem.empty();
           firstRender = true;
@@ -132,8 +133,8 @@ module.directive('graphLegend', function(popoverSrv, $timeout) {
         // Set width so it works with IE11
         var width: any = panel.legend.rightSide && panel.legend.sideWidth ? panel.legend.sideWidth + 'px' : '';
         var ieWidth: any = panel.legend.rightSide && panel.legend.sideWidth ? panel.legend.sideWidth - 1 + 'px' : '';
-        elem.css('min-width', width);
-        elem.css('width', ieWidth);
+        legendElem.css('min-width', width);
+        legendElem.css('width', ieWidth);
 
         elem.toggleClass('graph-legend-table', panel.legend.alignAsTable === true);
 
diff --git a/public/sass/components/_panel_graph.scss b/public/sass/components/_panel_graph.scss
index a19e0072518..d952b9aa703 100644
--- a/public/sass/components/_panel_graph.scss
+++ b/public/sass/components/_panel_graph.scss
@@ -7,6 +7,10 @@
     @include media-breakpoint-up(sm) {
       flex-direction: row;
 
+      .graph-panel__chart {
+        flex: 2 1 10px;
+      }
+
       .graph-legend {
         flex: 0 1 10px;
         max-height: 100%;
@@ -131,8 +135,20 @@
 // fix for phantomjs
 .body--phantomjs {
   .graph-panel--legend-right {
+    .graph-legend {
+      display: inline-block;
+    }
+
+    .graph-panel__chart {
+      display: flex;
+    }
+
     .graph-legend-table {
       display: table;
+
+      .graph-legend-scroll {
+        display: table;
+      }
     }
   }
 }