tweak run / refresh button overlap and spacing (#8217)

frontend/src/metabase/css/core/layout.css

@@ -88,6 +88,12 @@
   position: absolute;
 }
 
+@media screen and (--breakpoint-min-sm) {
+  .sm-absolute {
+    position: absolute;
+  }
+}
+
 .top,
 :local(.top) {
   top: 0;

frontend/src/metabase/css/query_builder.css

@@ -516,10 +516,15 @@
   opacity: 1;
   box-shadow: 0 1px 2px var(--color-shadow);
   transition: transform 0.5s, opacity 0.5s;
-  min-width: 8em;
   position: relative;
 }
 
+@media screen and (--breakpoint-min-sm) {
+  .RunButton {
+    min-width: 8em;
+  }
+}
+
 .RunButton.RunButton--hidden {
   transform: translateY(-65px);
   opacity: 0;

frontend/src/metabase/query_builder/components/QueryHeader.jsx

@@ -511,7 +511,7 @@ export default class QueryHeader extends Component {
 
   render() {
     return (
-      <div className="relative">
+      <div className="relative px2 sm-px0">
         <HeaderBar
           isEditing={this.props.isEditing}
           name={this.props.isNew ? t`New question` : this.props.card.name}

frontend/src/metabase/query_builder/components/QueryVisualization.jsx

@@ -157,13 +157,13 @@ export default class QueryVisualization extends Component {
     const isPublicLinksEnabled = MetabaseSettings.get("public_sharing");
     const isEmbeddingEnabled = MetabaseSettings.get("embedding");
     return (
-      <div className="relative flex align-center flex-no-shrink mt2 mb1 sm-py3">
+      <div className="relative flex align-center flex-no-shrink mt2 mb1 px2 sm-py3">
         <div className="z4 absolute left hide sm-show">
           {!isObjectDetail && (
             <VisualizationSettings ref="settings" {...this.props} />
           )}
         </div>
-        <div className="z3 absolute left right">
+        <div className="z3 sm-absolute left right">
           <Tooltip tooltip={runButtonTooltip}>
             <RunButton
               isRunnable={isRunnable}

frontend/src/metabase/query_builder/components/RunButton.jsx

@@ -20,8 +20,8 @@ export default class RunButton extends Component {
     if (isRunning) {
       buttonText = (
         <div className="flex align-center">
-          <Icon className="mr1" name="close" />
-          {t`Cancel`}
+          <Icon className="sm-mr1" name="close" />
+          <span className="hide sm-show">{t`Cancel`}</span>
         </div>
       );
     } else if (isRunnable && isDirty) {
@@ -29,8 +29,8 @@ export default class RunButton extends Component {
     } else if (isRunnable && !isDirty) {
       buttonText = (
         <div className="flex align-center">
-          <Icon className="mr1" name="refresh" />
-          {t`Refresh`}
+          <Icon className="sm-mr1" name="refresh" />
+          <span className="hide sm-show">{t`Refresh`}</span>
         </div>
       );
     }