fix uncentered pie chart (#48179)

e2e/test/scenarios/visualizations-charts/pie_chart.cy.spec.js

@@ -41,6 +41,17 @@ describe("scenarios > visualizations > pie chart", () => {
 
     ensurePieChartRendered(["Doohickey", "Gadget", "Gizmo", "Widget"], 200);
 
+    // chart should be centered (#48123)
+    cy.findByTestId("chart-legend").then(([legend]) => {
+      const legendWidth = legend.getBoundingClientRect().width;
+
+      cy.findByTestId("chart-legend-spacer").then(([spacer]) => {
+        const spacerWidth = spacer.getBoundingClientRect().width;
+
+        expect(legendWidth).to.be.equal(spacerWidth);
+      });
+    });
+
     cy.log("#35244");
     cy.findByLabelText("Switch to data").click();
     tableHeaderClick("Count");

frontend/src/metabase/visualizations/components/ChartWithLegend.jsx

@@ -146,6 +146,7 @@ class ChartWithLegend extends Component {
             className={cx(styles.LegendSpacer)}
             // don't center the chart on dashboards
             style={isDashboard ? { flexBasis: 0 } : {}}
+            data-testid="chart-legend-spacer"
           >
             {legend}
           </div>

frontend/src/metabase/visualizations/components/ChartWithLegend.module.css

@@ -13,8 +13,11 @@
 
 .ChartWithLegend .LegendSpacer,
 .ChartWithLegend .LegendWrapper {
+  display: flex;
+  justify-content: center;
   flex-basis: auto;
   flex-grow: 1;
+  flex-shrink: 1;
 
   /* allow legend and spacer to shrink */
   min-width: 0;
@@ -23,13 +26,6 @@
 
 .ChartWithLegend .LegendSpacer {
   visibility: hidden;
-  flex-shrink: 10; /* shrink the spacer much faster than the wrapper */
-}
-
-.ChartWithLegend .LegendWrapper {
-  display: flex;
-  justify-content: center;
-  flex-shrink: 1;
 }
 
 .ChartWithLegend .Chart {