Fix smart scalar alignment (#22343)

frontend/src/metabase/visualizations/visualizations/SmartScalar.jsx

@@ -135,7 +135,9 @@ export default class Smart extends React.Component {
         {formatNumber(Math.abs(lastChange), { number_style: "percent" })}
       </span>
     );
-    const separator = <PreviousValueSeparator>•</PreviousValueSeparator>;
+    const separator = (
+      <PreviousValueSeparator gridSize={gridSize}>•</PreviousValueSeparator>
+    );
     const granularityDisplay = (
       <span style={{ marginLeft: 5 }}>{jt`last ${granularity}`}</span>
     );
@@ -201,7 +203,7 @@ export default class Smart extends React.Component {
           ) : lastChange === 0 ? (
             t`No change from last ${granularity}`
           ) : (
-            <PreviousValueContainer>
+            <PreviousValueContainer gridSize={gridSize}>
               <Variation color={changeColor}>
                 <Icon
                   size={13}

frontend/src/metabase/visualizations/visualizations/SmartScalar.styled.jsx

 import styled from "@emotion/styled";
+import { css } from "@emotion/react";
 
 import { color } from "metabase/lib/colors";
-import { breakpointMaxSmall, space } from "metabase/styled-components/theme";
+import {
+  breakpointMaxSmall,
+  breakpointMaxLarge,
+  space,
+} from "metabase/styled-components/theme";
 
 export const Variation = styled.div`
   color: ${props => props.color};
@@ -17,11 +22,20 @@ export const PreviousValueContainer = styled.div`
   align-items: center;
   display: flex;
   flex-wrap: wrap;
+  justify-content: center;
   margin-top: ${space(0)};
 
   ${breakpointMaxSmall} {
     flex-direction: column;
   }
+
+  ${breakpointMaxLarge} {
+    ${props =>
+      props.gridSize?.width <= 3 &&
+      css`
+        flex-direction: column;
+      `}
+  }
 `;
 
 export const PreviousValueVariation = styled.h4`
@@ -42,4 +56,12 @@ export const PreviousValueSeparator = styled.span`
   ${breakpointMaxSmall} {
     display: none;
   }
+
+  ${breakpointMaxLarge} {
+    ${props =>
+      props.gridSize?.width <= 3 &&
+      css`
+        display: none;
+      `}
+  }
 `;