From e4cc41dd5b1e230d14d3f54eef682b6076e4dcff Mon Sep 17 00:00:00 2001
From: Alexander Kubyshkin <i.am.glint@gmail.com>
Date: Tue, 16 Nov 2021 14:22:33 +0200
Subject: [PATCH] Fix button "Run query" width (#32655) (#39081)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Fix button "Run query" width (#32655)

* Minor refactoring for simpler fix

* Removed new prop

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>
---
 .../src/components/RefreshPicker/RefreshPicker.tsx       | 3 ++-
 public/app/features/explore/RunButton.tsx                | 9 ++++++---
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/grafana-ui/src/components/RefreshPicker/RefreshPicker.tsx b/packages/grafana-ui/src/components/RefreshPicker/RefreshPicker.tsx
index 1c215b76689..6486f69eb83 100644
--- a/packages/grafana-ui/src/components/RefreshPicker/RefreshPicker.tsx
+++ b/packages/grafana-ui/src/components/RefreshPicker/RefreshPicker.tsx
@@ -54,7 +54,7 @@ export class RefreshPicker extends PureComponent<Props> {
   }
 
   render() {
-    const { onRefresh, intervals, tooltip, value, text, isLoading, noIntervalPicker } = this.props;
+    const { onRefresh, intervals, tooltip, value, text, isLoading, noIntervalPicker, width } = this.props;
 
     const currentValue = value || '';
     const variant = this.getVariant();
@@ -73,6 +73,7 @@ export class RefreshPicker extends PureComponent<Props> {
           onClick={onRefresh}
           variant={variant}
           icon={isLoading ? 'fa fa-spinner' : 'sync'}
+          style={width ? { width } : undefined}
           data-testid={selectors.components.RefreshPicker.runButtonV2}
         >
           {text}
diff --git a/public/app/features/explore/RunButton.tsx b/public/app/features/explore/RunButton.tsx
index 25be71ae58b..10dc209e64a 100644
--- a/public/app/features/explore/RunButton.tsx
+++ b/public/app/features/explore/RunButton.tsx
@@ -15,14 +15,16 @@ export type Props = {
 export function RunButton(props: Props) {
   const { isSmall, loading, onRun, onChangeRefreshInterval, refreshInterval, showDropdown, isLive } = props;
   const intervals = getTimeSrv().getValidIntervals(defaultIntervals);
-  let text: string | undefined;
+  let text: string | undefined = loading ? 'Cancel' : 'Run query';
+  let width = '108px';
 
   if (isLive) {
     return null;
   }
 
-  if (!isSmall) {
-    text = loading ? 'Cancel' : 'Run query';
+  if (isSmall) {
+    text = undefined;
+    width = '35px';
   }
 
   return (
@@ -36,6 +38,7 @@ export function RunButton(props: Props) {
       onRefresh={() => onRun(loading)}
       noIntervalPicker={!showDropdown}
       primary={true}
+      width={width}
     />
   );
 }