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

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

* Minor refactoring for simpler fix

* Removed new prop

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>

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}

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}
     />
   );
 }