ux: minor position change for layout selector, fixes #10217

public/app/features/plugins/partials/ds_list.html

@@ -3,10 +3,13 @@
 <div class="page-container page-body">
 	<div ng-if="ctrl.unfiltered.length">
 		<div class="page-action-bar">
-			<label class="gf-form gf-form--grow gf-form--has-input-icon">
-				<input type="text" class="gf-form-input width-20" ng-model="ctrl.searchQuery" ng-change="ctrl.onQueryUpdated()" placeholder="Filter by name or type" />
-				<i class="gf-form-input-icon fa fa-search"></i>
-			</label>
+			<div class="gf-form gf-form--grow">
+				<label class="gf-form--has-input-icon">
+					<input type="text" class="gf-form-input width-20" ng-model="ctrl.searchQuery" ng-change="ctrl.onQueryUpdated()" placeholder="Filter by name or type" />
+					<i class="gf-form-input-icon fa fa-search"></i>
+				</label>
+				<layout-selector />
+			</div>
 			<div class="page-action-bar__spacer"></div>
 			<a class="page-header__cta btn btn-success" href="datasources/new">
 				<i class="fa fa-plus"></i>
@@ -15,7 +18,6 @@
 		</div>
 
 		<section class="card-section" layout-mode>
-			<layout-selector></layout-selector>
 			<ol class="card-list">
 				<li class="card-item-wrapper" ng-repeat="ds in ctrl.datasources">
 					<a class="card-item" href="datasources/edit/{{ds.id}}/">

public/app/features/plugins/partials/plugin_list.html

@@ -2,43 +2,44 @@
 
 <div class="page-container page-body">
   <div class="page-action-bar">
-    <label class="gf-form gf-form--grow gf-form--has-input-icon">
-      <input type="text" class="gf-form-input width-20" ng-model="ctrl.searchQuery" ng-change="ctrl.onQueryUpdated()" placeholder="Filter by name or type" />
-      <i class="gf-form-input-icon fa fa-search"></i>
-    </label>
-
-    <div class="page-action-bar__spacer"></div>
-    <a class="btn btn-success" href="https://grafana.com/plugins?utm_source=grafana_plugin_list" target="_blank">
-      Find more plugins on Grafana.com
-    </a>
+		<div class="gf-form gf-form--grow">
+			<label class="gf-form--has-input-icon">
+				<input type="text" class="gf-form-input width-20" ng-model="ctrl.searchQuery" ng-change="ctrl.onQueryUpdated()" placeholder="Filter by name or type" />
+				<i class="gf-form-input-icon fa fa-search"></i>
+			</label>
+			<layout-selector />
+		</div>
+		<div class="page-action-bar__spacer"></div>
+		<a class="btn btn-success" href="https://grafana.com/plugins?utm_source=grafana_plugin_list" target="_blank">
+			Find more plugins on Grafana.com
+		</a>
 	</div>
 
-  <section class="card-section" layout-mode>
-    <layout-selector></layout-selector>
+	<section class="card-section" layout-mode>
 
-    <ol class="card-list" >
-      <li class="card-item-wrapper" ng-repeat="plugin in ctrl.plugins">
-        <a class="card-item" href="plugins/{{plugin.id}}/edit">
-          <div class="card-item-header">
-            <div class="card-item-type">
-              <i class="icon-gf icon-gf-{{plugin.type}}"></i>
-              {{plugin.type}}
-            </div>
-            <div class="card-item-notice" ng-show="plugin.hasUpdate">
-              <span bs-tooltip="plugin.latestVersion">Update available!</span>
-            </div>
-          </div>
-          <div class="card-item-body">
-            <figure class="card-item-figure">
-              <img ng-src="{{plugin.info.logos.small}}">
-            </figure>
-            <div class="card-item-details">
-              <div class="card-item-name">{{plugin.name}}</div>
-              <div class="card-item-sub-name">By {{plugin.info.author.name}}</div>
-            </div>
-          </div>
-        </a>
-      </li>
-    </ol>
-  </section>
+		<ol class="card-list" >
+			<li class="card-item-wrapper" ng-repeat="plugin in ctrl.plugins">
+				<a class="card-item" href="plugins/{{plugin.id}}/edit">
+					<div class="card-item-header">
+						<div class="card-item-type">
+							<i class="icon-gf icon-gf-{{plugin.type}}"></i>
+							{{plugin.type}}
+						</div>
+						<div class="card-item-notice" ng-show="plugin.hasUpdate">
+							<span bs-tooltip="plugin.latestVersion">Update available!</span>
+						</div>
+					</div>
+					<div class="card-item-body">
+						<figure class="card-item-figure">
+							<img ng-src="{{plugin.info.logos.small}}">
+						</figure>
+						<div class="card-item-details">
+							<div class="card-item-name">{{plugin.name}}</div>
+							<div class="card-item-sub-name">By {{plugin.info.author.name}}</div>
+						</div>
+					</div>
+				</a>
+			</li>
+		</ol>
+	</section>
 </div>

public/sass/components/_cards.scss

 .layout-selector {
   @include clearfix();
 
+  margin-left: $spacer;
   text-align: right;
-  margin: 0 $spacer*1.5 $spacer;
-  position: relative;
-  top: -0.5rem;
 
   button {
     background: $input-label-bg;