From 96be5fe8a341fb4aa5ee59076691ca5bb910d421 Mon Sep 17 00:00:00 2001
From: Dominik Prokop <prokopd@gmail.com>
Date: Mon, 7 Jan 2019 15:07:08 +0100
Subject: [PATCH] Remove the jump effect on run query button

Caused by the return and loading spinner icons having different widths. Used fa-fw helper class to ensure fixed width on icons. Also, made the spacing between icon and button label slightly smaller, as the rotated level-down icon used as return icon has significantly smaller width compared to the loading spinner and it looked oddly far from the label as compared to timepicker's icon
---
 public/app/features/explore/Explore.tsx | 2 +-
 public/sass/pages/_explore.scss         | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/public/app/features/explore/Explore.tsx b/public/app/features/explore/Explore.tsx
index a905034f302..d4d645950c1 100644
--- a/public/app/features/explore/Explore.tsx
+++ b/public/app/features/explore/Explore.tsx
@@ -944,7 +944,7 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
           <div className="navbar-buttons relative">
             <button className="btn navbar-button navbar-button--primary" onClick={this.onSubmit}>
               Run Query{' '}
-              {loading ? <i className="fa fa-spinner fa-spin run-icon" /> : <i className="fa fa-level-down run-icon" />}
+              {loading ? <i className="fa fa-spinner fa-fw fa-spin run-icon" /> : <i className="fa fa-level-down fa-fw run-icon" />}
             </button>
           </div>
         </div>
diff --git a/public/sass/pages/_explore.scss b/public/sass/pages/_explore.scss
index dd1afea7394..098dae1a4a2 100644
--- a/public/sass/pages/_explore.scss
+++ b/public/sass/pages/_explore.scss
@@ -160,7 +160,7 @@
   }
 
   .run-icon {
-    margin-left: 0.5em;
+    margin-left: 0.25em;
     transform: rotate(90deg);
   }