Merge pull request #14954 from grafana/minor-style-change

Panel edit mode style tweaks

public/app/features/dashboard/panel_editor/EditorTabBody.tsx

@@ -111,14 +111,11 @@ export class EditorTabBody extends PureComponent<Props, State> {
     return (
       <>
         <div className="toolbar">
-          <div className="toolbar__heading">{heading}</div>
-          {renderToolbar && renderToolbar()}
-          {toolbarItems.length > 0 && (
-            <>
-              <div className="gf-form--grow" />
-              {toolbarItems.map(item => this.renderButton(item))}
-            </>
-          )}
+          <div className="toolbar__left">
+            <div className="toolbar__heading">{heading}</div>
+            {renderToolbar && renderToolbar()}
+          </div>
+          {toolbarItems.map(item => this.renderButton(item))}
         </div>
         <div className="panel-editor__scroll">
           <CustomScrollbar autoHide={false} scrollTop={scrollTop} setScrollTop={setScrollTop}>

public/app/features/dashboard/panel_editor/QueriesTab.tsx

@@ -18,7 +18,7 @@ import config from 'app/core/config';
 // Types
 import { PanelModel } from '../panel_model';
 import { DashboardModel } from '../dashboard_model';
-import { DataQuery, DataSourceSelectItem  } from '@grafana/ui/src/types';
+import { DataQuery, DataSourceSelectItem } from '@grafana/ui/src/types';
 import { PluginHelp } from 'app/core/components/PluginHelp/PluginHelp';
 
 interface Props {
@@ -133,14 +133,13 @@ export class QueriesTab extends PureComponent<Props, State> {
     return (
       <>
         <DataSourcePicker datasources={this.datasources} onChange={this.onChangeDataSource} current={currentDS} />
-        <div className="m-l-2">
-          {!isAddingMixed && (
-            <button className="btn navbar-button navbar-button--primary" onClick={this.onAddQueryClick}>
-              Add Query
-            </button>
-          )}
-          {isAddingMixed && this.renderMixedPicker()}
-        </div>
+        <div className="flex-grow" />
+        {!isAddingMixed && (
+          <button className="btn navbar-button navbar-button--primary" onClick={this.onAddQueryClick}>
+            Add Query
+          </button>
+        )}
+        {isAddingMixed && this.renderMixedPicker()}
       </>
     );
   };

public/sass/components/_toolbar.scss

@@ -16,6 +16,12 @@
   padding-right: 20px;
 }
 
+.toolbar__left {
+  display: flex;
+  flex-grow: 1;
+  align-items: center;
+}
+
 .toolbar__main {
   padding: 0 $input-padding-x;
   font-size: $font-size-md;