Fix RowChart shrinks on hover (#43634)

* fix memoization

* extend the basic row chart e2e spec

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

@@ -79,5 +79,18 @@ describe("scenarios > visualizations > rows", () => {
       });
       cy.findByText("COLUMN_TWO");
     });
+
+    // Verify hovering bars does not change their size (metabase#43631)
+    cy.findAllByRole("graphics-symbol").eq(0).as("firstBar");
+    cy.get("@firstBar")
+      .invoke("width")
+      .then(prevWidth => {
+        cy.get("@firstBar")
+          .realHover()
+          .invoke("width")
+          .then(newWidth => {
+            expect(prevWidth).eq(newWidth);
+          });
+      });
   });
 });

frontend/src/metabase/visualizations/shared/components/RowChart/RowChart.stories.tsx

@@ -85,7 +85,7 @@ export const Default = Template.bind({});
 Default.args = DEFAULT_ROW_CHART_ARGS;
 
 const ThemedRowChart = () => {
-  const theme = useRowChartTheme({ fontFamily: "Lato" });
+  const theme = useRowChartTheme("Lato");
 
   return (
     <Box h={600} bg="white" p="8px">

frontend/src/metabase/visualizations/visualizations/RowChart/RowChart.tsx

@@ -135,7 +135,7 @@ const RowChartVisualization = ({
   );
   const goal = useMemo(() => getChartGoal(settings), [settings]);
   const stackOffset = getStackOffset(settings);
-  const theme = useRowChartTheme({ fontFamily });
+  const theme = useRowChartTheme(fontFamily);
 
   const chartWarnings = useMemo(
     () => getChartWarnings(chartColumns, data.rows),

frontend/src/metabase/visualizations/visualizations/RowChart/utils/theme.ts

@@ -5,17 +5,12 @@ import { useMantineTheme } from "metabase/ui";
 import type { RowChartTheme } from "metabase/visualizations/shared/components/RowChart/types";
 import { getVisualizationTheme } from "metabase/visualizations/shared/utils/theme";
 
-interface RowChartThemeOptions {
-  fontFamily?: string;
-}
-
 export const useRowChartTheme = (
-  options: RowChartThemeOptions,
+  fontFamily: string = "Lato",
 ): RowChartTheme => {
   const theme = useMantineTheme();
 
   return useMemo(() => {
-    const { fontFamily = "Lato" } = options;
     const { cartesian } = getVisualizationTheme(theme.other);
 
     return {
@@ -53,5 +48,5 @@ export const useRowChartTheme = (
         color: color("border"),
       },
     };
-  }, [options, theme]);
+  }, [theme, fontFamily]);
 };