From 2908c6a80bd59df53e2bf60054500bf5d60285ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.org>
Date: Fri, 30 Sep 2016 13:13:28 +0200
Subject: [PATCH] fix(metricsegment): added min width for inputs for metric
 segment and value select components

---
 public/app/core/directives/metric_segment.js        | 2 +-
 public/app/core/directives/value_select_dropdown.js | 2 +-
 public/app/partials/valueSelectDropdown.html        | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/public/app/core/directives/metric_segment.js b/public/app/core/directives/metric_segment.js
index 381f9110c65..cc662aa67ca 100644
--- a/public/app/core/directives/metric_segment.js
+++ b/public/app/core/directives/metric_segment.js
@@ -136,7 +136,7 @@ function (_, $, coreModule) {
 
         $button.click(function() {
           options = null;
-          $input.css('width', ($button.width() + 16) + 'px');
+          $input.css('width', (Math.max($button.width(), 80) + 16) + 'px');
 
           $button.hide();
           $input.show();
diff --git a/public/app/core/directives/value_select_dropdown.js b/public/app/core/directives/value_select_dropdown.js
index d97124f3406..7f3c8ccc7bb 100644
--- a/public/app/core/directives/value_select_dropdown.js
+++ b/public/app/core/directives/value_select_dropdown.js
@@ -236,7 +236,7 @@ function (angular, _, coreModule) {
         var inputEl = elem.find('input');
 
         function openDropdown() {
-          inputEl.css('width', Math.max(linkEl.width(), 30) + 'px');
+          inputEl.css('width', Math.max(linkEl.width(), 80) + 'px');
 
           inputEl.show();
           linkEl.hide();
diff --git a/public/app/partials/valueSelectDropdown.html b/public/app/partials/valueSelectDropdown.html
index d1ebce44040..a64f872cd2d 100644
--- a/public/app/partials/valueSelectDropdown.html
+++ b/public/app/partials/valueSelectDropdown.html
@@ -10,7 +10,7 @@
 		<i class="fa fa-caret-down"></i>
 	</a>
 
-	<input type="text" class="hidden-input input-small gf-form-input" style="display: none" ng-keydown="vm.keyDown($event)" ng-model="vm.search.query" ng-change="vm.queryChanged()" ></input>
+	<input type="text" class="gf-form-input" style="display: none" ng-keydown="vm.keyDown($event)" ng-model="vm.search.query" ng-change="vm.queryChanged()" ></input>
 
 	<div class="variable-value-dropdown" ng-if="vm.dropdownVisible" ng-class="{'multi': vm.variable.multi, 'single': !vm.variable.multi}">
 		<div class="variable-options-wrapper">