added select-wrapper to where it was missing for unified look

public/app/features/admin/partials/edit_org.html

@@ -27,8 +27,12 @@
 			<td>{{orgUser.login}}</td>
 			<td>{{orgUser.login}}</td>
 			<td>{{orgUser.email}}</td>
 			<td>{{orgUser.email}}</td>
 			<td>
 			<td>
-				<select type="text" ng-model="orgUser.role" class="gf-form-input max-width-8" ng-options="f for f in ['Viewer', 'Editor', 'Read Only Editor', 'Admin']" ng-change="updateOrgUser(orgUser)">
-				</select>
+        <div class="gf-form">
+          <span class="gf-form-select-wrapper">
+              <select type="text" ng-model="orgUser.role" class="gf-form-input max-width-8" ng-options="f for f in ['Viewer', 'Editor', 'Read Only Editor', 'Admin']" ng-change="updateOrgUser(orgUser)">
+              </select>
+          </span>
+        </div>
 			</td>
 			</td>
 			<td style="width: 1%">
 			<td style="width: 1%">
 				<a ng-click="removeOrgUser(orgUser)" class="btn btn-danger btn-mini">
 				<a ng-click="removeOrgUser(orgUser)" class="btn btn-danger btn-mini">

public/app/features/admin/partials/edit_user.html

@@ -59,8 +59,10 @@
 				<input type="text" ng-model="newOrg.name" bs-typeahead="searchOrgs"	required class="gf-form-input max-width-20" placeholder="organization name">
 				<input type="text" ng-model="newOrg.name" bs-typeahead="searchOrgs"	required class="gf-form-input max-width-20" placeholder="organization name">
 			</div>
 			</div>
 			<div class="gf-form">
 			<div class="gf-form">
-				<span class="gf-form-label">Role</span>
-				<select type="text" ng-model="newOrg.role" class="gf-form-input width-10" ng-options="f for f in ['Viewer', 'Editor', 'Read Only Editor', 'Admin']"></select>
+        <span class="gf-form-label">Role</span>
+        <span class="gf-form-select-wrapper">
+            <select type="text" ng-model="newOrg.role" class="gf-form-input width-10" ng-options="f for f in ['Viewer', 'Editor', 'Read Only Editor', 'Admin']"></select>
+        </span>
 			</div>
 			</div>
 			<div class="gf-form">
 			<div class="gf-form">
 				<button class="btn btn-success gf-form-btn" ng-click="addOrgUser()">Add</button>
 				<button class="btn btn-success gf-form-btn" ng-click="addOrgUser()">Add</button>
@@ -81,8 +83,12 @@
 				{{org.name}} <span class="label label-info" ng-show="org.orgId === user.orgId">Current</span>
 				{{org.name}} <span class="label label-info" ng-show="org.orgId === user.orgId">Current</span>
 			</td>
 			</td>
 			<td>
 			<td>
-				<select type="text" ng-model="org.role" class="gf-form-input max-width-12" ng-options="f for f in ['Viewer', 'Editor', 'Read Only Editor', 'Admin']" ng-change="updateOrgUser(org)">
-				</select>
+        <div class="gf-form">
+            <span class="gf-form-select-wrapper">
+                <select type="text" ng-model="org.role" class="gf-form-input max-width-12" ng-options="f for f in ['Viewer', 'Editor', 'Read Only Editor', 'Admin']" ng-change="updateOrgUser(org)">
+                </select>
+            </span>
+        </div>
 			</td>
 			</td>
 			<td style="width: 1%">
 			<td style="width: 1%">
 				<a ng-click="removeOrgUser(org)" class="btn btn-danger btn-mini">
 				<a ng-click="removeOrgUser(org)" class="btn btn-danger btn-mini">

public/app/features/org/partials/invite.html

@@ -17,7 +17,7 @@
           <span class="gf-form-label">Name</span>
           <span class="gf-form-label">Name</span>
           <input type="text" ng-model="invite.name" class="gf-form-input" placeholder="name (optional)">
           <input type="text" ng-model="invite.name" class="gf-form-input" placeholder="name (optional)">
         </div>
         </div>
-        <div class="gf-form max-width-10">
+        <div class="gf-form max-width-13">
           <span class="gf-form-label">Role</span>
           <span class="gf-form-label">Role</span>
           <select ng-model="invite.role" class="gf-form-input" ng-options="f for f in ['Viewer', 'Editor', 'Read Only Editor', 'Admin']">
           <select ng-model="invite.role" class="gf-form-input" ng-options="f for f in ['Viewer', 'Editor', 'Read Only Editor', 'Admin']">
           </select>
           </select>

public/app/features/org/partials/orgApiKeys.html

@@ -12,7 +12,9 @@
 			</div>
 			</div>
 			<div class="gf-form">
 			<div class="gf-form">
 				<span class="gf-form-label">Role</span>
 				<span class="gf-form-label">Role</span>
-				<select class="gf-form-input gf-size-auto" ng-model="token.role" ng-options="r for r in roleTypes"></select>
+        <span class="gf-form-select-wrapper">
+            <select class="gf-form-input gf-size-auto" ng-model="token.role" ng-options="r for r in roleTypes"></select>
+        </span>
 			</div>
 			</div>
 			<div class="gf-form">
 			<div class="gf-form">
 				<button class="btn gf-form-btn btn-success" ng-click="addToken()">Add</button>
 				<button class="btn gf-form-btn btn-success" ng-click="addToken()">Add</button>

public/app/features/org/partials/orgUsers.html

@@ -75,7 +75,7 @@
         <td><span class="ellipsis">{{user.email}}</span></td>
         <td><span class="ellipsis">{{user.email}}</span></td>
         <td>{{user.lastSeenAtAge}}</td>
         <td>{{user.lastSeenAtAge}}</td>
         <td>
         <td>
-          <div class="gf-form-select-wrapper width-9">
+          <div class="gf-form-select-wrapper width-12">
             <select type="text" ng-model="user.role" class="gf-form-input" ng-options="f for f in ['Viewer', 'Editor', 'Read Only Editor', 'Admin']" ng-change="ctrl.updateOrgUser(user)">
             <select type="text" ng-model="user.role" class="gf-form-input" ng-options="f for f in ['Viewer', 'Editor', 'Read Only Editor', 'Admin']" ng-change="ctrl.updateOrgUser(user)">
             </select>
             </select>
           </div>
           </div>

public/app/plugins/datasource/cloudwatch/partials/config.html

 <h3 class="page-heading">CloudWatch details</h3>
 <h3 class="page-heading">CloudWatch details</h3>
 
 
 <div class="gf-form-group max-width-30">
 <div class="gf-form-group max-width-30">
-  <div class="gf-form">
+  <div class="gf-form gf-form-select-wrapper">
     <label class="gf-form-label width-13">Auth Provider</label>
     <label class="gf-form-label width-13">Auth Provider</label>
     <select class="gf-form-input gf-max-width-13" ng-model="ctrl.current.jsonData.authType" ng-options="f.value as f.name for f in ctrl.authTypes"></select>
     <select class="gf-form-input gf-max-width-13" ng-model="ctrl.current.jsonData.authType" ng-options="f.value as f.name for f in ctrl.authTypes"></select>
   </div>
   </div>

public/app/plugins/datasource/elasticsearch/partials/config.html

@@ -11,8 +11,10 @@
 		</div>
 		</div>
 
 
 		<div class="gf-form width-14">
 		<div class="gf-form width-14">
-			<span class="gf-form-label width-9">Pattern</span>
-			<select class="gf-form-input gf-size-auto" ng-model="ctrl.current.jsonData.interval" ng-options="f.value as f.name for f in ctrl.indexPatternTypes" ng-change="ctrl.indexPatternTypeChanged()" ></select>
+      <span class="gf-form-label width-9">Pattern</span>
+      <span class="gf-form-select-wrapper">
+          <select class="gf-form-input gf-size-auto" ng-model="ctrl.current.jsonData.interval" ng-options="f.value as f.name for f in ctrl.indexPatternTypes" ng-change="ctrl.indexPatternTypeChanged()" ></select>
+      </span>
 		</div>
 		</div>
 	</div>
 	</div>
 
 
@@ -22,8 +24,10 @@
 	</div>
 	</div>
 
 
 	<div class="gf-form">
 	<div class="gf-form">
-		<span class="gf-form-label width-9">Version</span>
-		<select class="gf-form-input gf-size-auto" ng-model="ctrl.current.jsonData.esVersion" ng-options="f.value as f.name for f in ctrl.esVersions"></select>
+    <span class="gf-form-label width-9">Version</span>
+    <span class="gf-form-select-wrapper">
+        <select class="gf-form-input gf-size-auto" ng-model="ctrl.current.jsonData.esVersion" ng-options="f.value as f.name for f in ctrl.esVersions"></select>
+    </span>
 	</div>
 	</div>
     <div class="gf-form max-width-30" ng-if="ctrl.current.jsonData.esVersion>=56">
     <div class="gf-form max-width-30" ng-if="ctrl.current.jsonData.esVersion>=56">
         <span class="gf-form-label width-15">Max concurrent Shard Requests</span>
         <span class="gf-form-label width-15">Max concurrent Shard Requests</span>

public/app/plugins/datasource/graphite/partials/config.html

@@ -13,6 +13,8 @@
         This option controls what functions are available in the Graphite query editor.
         This option controls what functions are available in the Graphite query editor.
       </info-popover>
       </info-popover>
     </span>
     </span>
-		<select class="gf-form-input gf-size-auto" ng-model="ctrl.current.jsonData.graphiteVersion" ng-options="f.value as f.name for f in ctrl.graphiteVersions"></select>
+    <span class="gf-form-select-wrapper">
+        <select class="gf-form-input gf-size-auto" ng-model="ctrl.current.jsonData.graphiteVersion" ng-options="f.value as f.name for f in ctrl.graphiteVersions"></select>
+    </span>
 	</div>
 	</div>
 </div>
 </div>

public/sass/components/_gf-form.scss

@@ -53,6 +53,10 @@ $input-border: 1px solid $input-border-color;
   flex-direction: row;
   flex-direction: row;
   flex-wrap: wrap;
   flex-wrap: wrap;
   align-content: flex-start;
   align-content: flex-start;
+
+  .gf-form + .gf-form {
+    margin-right: $gf-form-margin;
+  }
 }
 }
 
 
 .gf-form-button-row {
 .gf-form-button-row {
@@ -89,10 +93,6 @@ $input-border: 1px solid $input-border-color;
   margin-right: $gf-form-margin;
   margin-right: $gf-form-margin;
 }
 }
 
 
-.gf-form + .gf-form {
-  margin-right: $gf-form-margin;
-}
-
 .gf-form-pre {
 .gf-form-pre {
   display: block;
   display: block;
   flex-grow: 1;
   flex-grow: 1;