change scalar compact formatting to depend on pixel width rather than grid width (#10932)

frontend/src/metabase/visualizations/visualizations/Scalar.jsx

@@ -33,6 +33,10 @@ function legacyScalarSettingsToFormatOptions(settings) {
     .value();
 }
 
+// used below to determine whether we show compact formatting
+const COMPACT_MAX_WIDTH = 250;
+const COMPACT_MIN_LENGTH = 6;
+
 // Scalar visualization shows a single number
 // Multiseries Scalar is transformed to a Funnel
 export default class Scalar extends Component {
@@ -176,10 +180,10 @@ export default class Scalar extends Component {
       ],
       isDashboard,
       onChangeCardAndRun,
-      gridSize,
       settings,
       visualizationIsClickable,
       onVisualizationClick,
+      width,
     } = this.props;
 
     const columnIndex = this._getColumnIndex(cols, settings);
@@ -198,8 +202,10 @@ export default class Scalar extends Component {
       compact: true,
     });
 
+    // use the compact version of formatting if the component is narrower than
+    // the cutoff and the formatted value is longer than the cutoff
     const displayCompact =
-      fullScalarValue.length > 6 && gridSize && gridSize.width < 4;
+      fullScalarValue.length > COMPACT_MIN_LENGTH && width < COMPACT_MAX_WIDTH;
     const displayValue = displayCompact ? compactScalarValue : fullScalarValue;
 
     const clicked = { value, column };

frontend/test/metabase/visualizations/visualizations/Scalar.unit.spec.js

@@ -36,7 +36,7 @@ describe("MetricForm", () => {
         series={series(12345)}
         settings={settings}
         visualizationIsClickable={() => false}
-        gridSize={{ width: 3 }}
+        width={230}
       />,
     );
     getByText("12,345"); // with compact formatting, we'd have 1
@@ -48,7 +48,7 @@ describe("MetricForm", () => {
         series={series(12345.6)}
         settings={settings}
         visualizationIsClickable={() => false}
-        gridSize={{ width: 3 }}
+        width={230}
       />,
     );
     getByText("12.3k");