From f2f709989fae4920deeb1006526cec1172db98d9 Mon Sep 17 00:00:00 2001
From: Patrick O'Carroll <ocarroll.patrick@gmail.com>
Date: Thu, 22 Mar 2018 09:41:05 +0100
Subject: [PATCH] fixed so legend right works like legend under on small
 screens

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

diff --git a/public/app/plugins/panel/graph/legend.ts b/public/app/plugins/panel/graph/legend.ts
index 0c8852bf55a..7a9c75d4f1d 100644
--- a/public/app/plugins/panel/graph/legend.ts
+++ b/public/app/plugins/panel/graph/legend.ts
@@ -227,6 +227,8 @@ module.directive('graphLegend', function(popoverSrv, $timeout) {
       }
 
       function renderLegendElement(tableHeaderElem) {
+        let legendWidth = elem.width();
+
         var seriesElements = renderSeriesLegendElements();
 
         if (panel.legend.alignAsTable) {
@@ -238,7 +240,7 @@ module.directive('graphLegend', function(popoverSrv, $timeout) {
           elem.append(seriesElements);
         }
 
-        if (!panel.legend.rightSide) {
+        if (!panel.legend.rightSide || (panel.legend.rightSide && legendWidth !== 10)) {
           addScrollbar();
         } else {
           destroyScrollbar();
diff --git a/public/sass/components/_panel_graph.scss b/public/sass/components/_panel_graph.scss
index c00af05140a..48d88872074 100644
--- a/public/sass/components/_panel_graph.scss
+++ b/public/sass/components/_panel_graph.scss
@@ -6,11 +6,11 @@
   &--legend-right {
     @include media-breakpoint-up(sm) {
       flex-direction: row;
-    }
 
-    .graph-legend {
-      flex: 0 1 10px;
-      max-height: 100%;
+      .graph-legend {
+        flex: 0 1 10px;
+        max-height: 100%;
+      }
     }
 
     .graph-legend-series {