ux(query_editors): handle text overflow in collapsed mode

public/app/features/panel/partials/query_editor_row.html

@@ -10,7 +10,7 @@
 		</label>
 		</label>
 	</div>
 	</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">
 		<div class="gf-form">
 			<label class="gf-form-label pointer gf-form-label--grow" ng-click="ctrl.toggleCollapse()">
 			<label class="gf-form-label pointer gf-form-label--grow" ng-click="ctrl.toggleCollapse()">
 				{{ctrl.collapsedText}}
 				{{ctrl.collapsedText}}

public/sass/components/_gf-form.scss

@@ -220,6 +220,18 @@ $gf-form-margin: 0.25rem;
 
 
 .gf-form-query-content {
 .gf-form-query-content {
   flex-grow: 1;
   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 {
 .gf-form-help-icon {