remove unnecessary explicit size (#45612)

frontend/src/metabase/visualizations/components/legend/LegendLayout.jsx

 import PropTypes from "prop-types";
 import _ from "underscore";
 
-import ExplicitSize from "metabase/components/ExplicitSize";
-
 import Legend from "./Legend";
 import LegendActions from "./LegendActions";
 import {
@@ -35,7 +33,7 @@ const propTypes = {
   canRemoveSeries: PropTypes.func,
 };
 
-const LegendLayout = ({
+export const LegendLayout = ({
   className,
   items,
   hovered,
@@ -98,5 +96,3 @@ const LegendLayout = ({
 };
 
 LegendLayout.propTypes = propTypes;
-
-export default _.compose(ExplicitSize())(LegendLayout);

frontend/src/metabase/visualizations/visualizations/CartesianChart/CartesianChart.styled.tsx

 import styled from "@emotion/styled";
 
 import { ResponsiveEChartsRenderer } from "metabase/visualizations/components/EChartsRenderer";
-import LegendLayout from "metabase/visualizations/components/legend/LegendLayout";
+import { LegendLayout } from "metabase/visualizations/components/legend/LegendLayout";
 
 import { getChartPadding } from "./padding";
 

frontend/src/metabase/visualizations/visualizations/CartesianChart/CartesianChart.tsx

@@ -28,7 +28,8 @@ function _CartesianChart(props: VisualizationProps) {
     card,
     getHref,
     gridSize,
-    width,
+    width: outerWidth,
+    height: outerHeight,
     showTitle,
     headerIcon,
     actionButtons,
@@ -98,7 +99,7 @@ function _CartesianChart(props: VisualizationProps) {
           actionButtons={actionButtons}
           getHref={canSelectTitle ? getHref : undefined}
           onSelectTitle={canSelectTitle ? onOpenQuestion : undefined}
-          width={width}
+          width={outerWidth}
         />
       )}
       <CartesianChartLegendLayout
@@ -113,6 +114,8 @@ function _CartesianChart(props: VisualizationProps) {
         canRemoveSeries={canRemoveSeries}
         onRemoveSeries={onRemoveSeries}
         onHoverChange={onHoverChange}
+        width={outerWidth}
+        height={outerHeight}
       >
         {/**@ts-expect-error emotion does not properly provide prop types due */}
         <CartesianChartRenderer

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

 import styled from "@emotion/styled";
 
 import LegendCaption from "metabase/visualizations/components/legend/LegendCaption";
-import LegendLayout from "metabase/visualizations/components/legend/LegendLayout";
+import { LegendLayout } from "metabase/visualizations/components/legend/LegendLayout";
 import { getChartPadding } from "metabase/visualizations/visualizations/CartesianChart/padding";
 
 interface RowVisualizationRootProps {

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

@@ -110,7 +110,8 @@ const RowChartVisualization = ({
   rawSeries: rawMultipleSeries,
   series: multipleSeries,
   fontFamily,
-  width,
+  width: outerWidth,
+  height: outerHeight,
   getHref,
 }: VisualizationProps) => {
   const formatColumnValue = useMemo(() => {
@@ -286,11 +287,13 @@ const RowChartVisualization = ({
           icon={headerIcon}
           actionButtons={actionButtons}
           onSelectTitle={canSelectTitle ? openQuestion : undefined}
-          width={width}
+          width={outerWidth}
           getHref={getHref}
         />
       )}
       <RowChartLegendLayout
+        width={outerWidth}
+        height={outerHeight}
         hasLegend={hasLegend}
         items={legendItems}
         actionButtons={!hasTitle ? actionButtons : undefined}