From 1069f485daf3335822897772d6a1588fd3cdb193 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel.odegaard@gmail.com>
Date: Sun, 17 Apr 2016 22:24:40 -0400
Subject: [PATCH] ux(query_editors): handle text overflow in collapsed mode

---
 .../features/panel/partials/query_editor_row.html    |  2 +-
 public/sass/components/_gf-form.scss                 | 12 ++++++++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/public/app/features/panel/partials/query_editor_row.html b/public/app/features/panel/partials/query_editor_row.html
index 6c0b0d69a80..0529a178d28 100644
--- a/public/app/features/panel/partials/query_editor_row.html
+++ b/public/app/features/panel/partials/query_editor_row.html
@@ -10,7 +10,7 @@
 		</label>
 	</div>
 
-	<div class="gf-form-query-content" ng-if="ctrl.collapsed">
+	<div class="gf-form-query-content gf-form-query-content--collapsed" ng-if="ctrl.collapsed">
 		<div class="gf-form">
 			<label class="gf-form-label pointer gf-form-label--grow" ng-click="ctrl.toggleCollapse()">
 				{{ctrl.collapsedText}}
diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss
index 75042f958e7..5aaea7bda7b 100644
--- a/public/sass/components/_gf-form.scss
+++ b/public/sass/components/_gf-form.scss
@@ -220,6 +220,18 @@ $gf-form-margin: 0.25rem;
 
 .gf-form-query-content {
   flex-grow: 1;
+  overflow: hidden;
+
+  &--collapsed {
+    overflow: hidden;
+
+    .gf-form-label {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      width: 100%;
+      white-space: nowrap;
+    }
+  }
 }
 
 .gf-form-help-icon {