prevent scalar values from overflowing. fixes #3342 (#4016)

frontend/src/metabase/visualizations/Scalar.jsx

@@ -124,7 +124,12 @@ export default class Scalar extends Component {
         return (
             <div className={cx(className, styles.Scalar, styles[isSmall ? "small" : "large"])}>
                 <div className="Card-title absolute top right p1 px2">{actionButtons}</div>
-                <Ellipsified className={cx(styles.Value, 'ScalarValue', 'fullscreen-normal-text', 'fullscreen-night-text')} tooltip={fullScalarValue} alwaysShowTooltip={fullScalarValue !== compactScalarValue}>
+                <Ellipsified
+                    className={cx(styles.Value, 'ScalarValue', 'fullscreen-normal-text', 'fullscreen-night-text')}
+                    tooltip={fullScalarValue}
+                    alwaysShowTooltip={fullScalarValue !== compactScalarValue}
+                    style={{maxWidth: '100%'}}
+                >
                     {compactScalarValue}
                 </Ellipsified>
                 <Ellipsified className={styles.Title} tooltip={card.name}>