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__left">
             <div className="toolbar__heading">{heading}</div>
             {renderToolbar && renderToolbar()}
-          {toolbarItems.length > 0 && (
-            <>
-              <div className="gf-form--grow" />
+          </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

@@ -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">
+        <div className="flex-grow" />
         {!isAddingMixed && (
           <button className="btn navbar-button navbar-button--primary" onClick={this.onAddQueryClick}>
             Add Query
           </button>
         )}
         {isAddingMixed && this.renderMixedPicker()}
-        </div>
       </>
     );
   };

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;