From a968116749bf3d60f46af6f57a7e2ca32b47fac7 Mon Sep 17 00:00:00 2001
From: Gustavo Saiani <gustavo@poe.ma>
Date: Fri, 6 May 2022 02:58:57 -0300
Subject: [PATCH] Fix smart scalar alignment (#22343)

---
 .../visualizations/SmartScalar.jsx            |  6 +++--
 .../visualizations/SmartScalar.styled.jsx     | 24 ++++++++++++++++++-
 2 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/frontend/src/metabase/visualizations/visualizations/SmartScalar.jsx b/frontend/src/metabase/visualizations/visualizations/SmartScalar.jsx
index f1e6c9448b7..b692ca9bcb9 100644
--- a/frontend/src/metabase/visualizations/visualizations/SmartScalar.jsx
+++ b/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}
diff --git a/frontend/src/metabase/visualizations/visualizations/SmartScalar.styled.jsx b/frontend/src/metabase/visualizations/visualizations/SmartScalar.styled.jsx
index e87c1533f5e..e1fad8e45fd 100644
--- a/frontend/src/metabase/visualizations/visualizations/SmartScalar.styled.jsx
+++ b/frontend/src/metabase/visualizations/visualizations/SmartScalar.styled.jsx
@@ -1,7 +1,12 @@
 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;
+      `}
+  }
 `;
-- 
GitLab