From 4916826364691ac5bd8332651c22c2f1d069e96c Mon Sep 17 00:00:00 2001
From: Patrick O'Carroll <ocarroll.patrick@gmail.com>
Date: Thu, 22 Mar 2018 14:39:13 +0100
Subject: [PATCH] small screen legend right also work like legend under in
 render + set scrollbar to undefined in destroyScrollbar so it doesnt become
 disabled when toggeling between right and under

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

diff --git a/public/app/plugins/panel/graph/legend.ts b/public/app/plugins/panel/graph/legend.ts
index 7a9c75d4f1d..8a7248fea7f 100644
--- a/public/app/plugins/panel/graph/legend.ts
+++ b/public/app/plugins/panel/graph/legend.ts
@@ -111,6 +111,7 @@ module.directive('graphLegend', function(popoverSrv, $timeout) {
       }
 
       function render() {
+        let legendWidth = elem.width();
         if (!ctrl.panel.legend.show) {
           elem.empty();
           firstRender = true;
@@ -163,7 +164,7 @@ module.directive('graphLegend', function(popoverSrv, $timeout) {
         }
 
         // render first time for getting proper legend height
-        if (!panel.legend.rightSide) {
+        if (!panel.legend.rightSide || (panel.legend.rightSide && legendWidth !== 10)) {
           renderLegendElement(tableHeaderElem);
           elem.empty();
         }
@@ -265,6 +266,7 @@ module.directive('graphLegend', function(popoverSrv, $timeout) {
       function destroyScrollbar() {
         if (legendScrollbar) {
           legendScrollbar.destroy();
+          legendScrollbar = undefined;
         }
       }
     },
diff --git a/public/sass/components/_panel_graph.scss b/public/sass/components/_panel_graph.scss
index 48d88872074..e15cd576367 100644
--- a/public/sass/components/_panel_graph.scss
+++ b/public/sass/components/_panel_graph.scss
@@ -11,19 +11,19 @@
         flex: 0 1 10px;
         max-height: 100%;
       }
-    }
 
-    .graph-legend-series {
-      display: block;
-      padding-left: 0px;
-    }
+      .graph-legend-series {
+        display: block;
+        padding-left: 0px;
+      }
 
-    .graph-legend-table {
-      width: auto;
-    }
+      .graph-legend-table {
+        width: auto;
+      }
 
-    .graph-legend-table .graph-legend-series {
-      display: table-row;
+      .graph-legend-table .graph-legend-series {
+        display: table-row;
+      }
     }
   }
 }