[WC-3594]: Chart previews no longer overlap other widgets in design mode

packages/pluggableWidgets/area-chart-web/CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+- We fixed an issue where the chart preview in design mode overlapped other widgets when placed in a narrow container.
+
 ## [6.2.1] - 2025-07-15
 
 ### Changed

packages/pluggableWidgets/bar-chart-web/CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+- We fixed an issue where the chart preview in design mode overlapped other widgets when placed in a narrow container.
+
 ## [6.2.1] - 2025-07-15
 
 ### Changed

packages/pluggableWidgets/bubble-chart-web/CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+- We fixed an issue where the chart preview in design mode overlapped other widgets when placed in a narrow container.
+
 ## [6.2.1] - 2025-07-15
 
 ### Changed

packages/pluggableWidgets/column-chart-web/CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+- We fixed an issue where the chart preview in design mode overlapped other widgets when placed in a narrow container.
+
 ## [6.2.1] - 2025-07-15
 
 ### Changed

packages/pluggableWidgets/heatmap-chart-web/CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+- We fixed an issue where the chart preview in design mode overlapped other widgets when placed in a narrow container.
+
 ## [6.2.1] - 2025-07-15
 
 ### Fixed

packages/pluggableWidgets/line-chart-web/CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+- We fixed an issue where the chart preview in design mode overlapped other widgets when placed in a narrow container.
+
 ## [6.2.1] - 2025-07-15
 
 ### Changed

packages/pluggableWidgets/pie-doughnut-chart-web/CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+- We fixed an issue where the chart preview in design mode overlapped other widgets when placed in a narrow container.
+
 ## [6.2.1] - 2025-07-15
 
 ### Changed

packages/pluggableWidgets/time-series-chart-web/CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+- We fixed an issue where the chart preview in design mode overlapped other widgets when placed in a narrow container.
+
 ## [6.2.1] - 2025-07-15
 
 ### Changed

packages/shared/charts/src/components/ChartPreview.tsx

@@ -12,7 +12,7 @@ export interface ChartPreviewProps {
 export function ChartPreview(props: ChartPreviewProps): ReactElement {
     const { renderer: PlaygroundSlot } = props.playground ?? { renderer: () => null };
     return (
-        <div style={{ display: "inline-flex", flexFlow: "column nowrap" }}>
+        <div style={{ display: "flex", flexFlow: "column nowrap", maxWidth: props.showLegend ? "385px" : "300px" }}>
             <div
                 style={
                     props.showPlaygroundSlot
@@ -30,11 +30,17 @@ export function ChartPreview(props: ChartPreviewProps): ReactElement {
 }
 
 ChartPreview.PlotImage = (props: { src: string; alt: string }) => {
-    return <img src={props.src} alt={props.alt} style={{ objectFit: "contain", width: "300px", height: "100%" }} />;
+    return (
+        <img
+            src={props.src}
+            alt={props.alt}
+            style={{ objectFit: "contain", flex: "1 1 0", minWidth: 0, height: "100%" }}
+        />
+    );
 };
 
 ChartPreview.PlotLegend = (props: { src: string; alt: string }) => {
-    return <img src={props.src} alt={props.alt} style={{ width: "85px" }} />;
+    return <img src={props.src} alt={props.alt} style={{ flex: "none", width: "85px" }} />;
 };
 
 function Chart(props: ChartPreviewProps): ReactElement {
@@ -43,7 +49,7 @@ function Chart(props: ChartPreviewProps): ReactElement {
             className={props.class}
             style={{
                 display: "flex",
-                width: props.showLegend ? "385px" : "300px",
+                width: "100%",
                 height: "232px"
             }}
         >

packages/shared/charts/src/components/__tests__/ChartPreview.spec.tsx

@@ -0,0 +1,42 @@
+import { render, screen } from "@testing-library/react";
+import { ReactNode } from "react";
+import { ChartPreview, ChartPreviewProps } from "../ChartPreview";
+
+function renderPreview(showLegend: boolean): void {
+    const props: ChartPreviewProps = {
+        class: "test-chart",
+        showLegend,
+        playground: { widgetCount: 0, renderer: ({ children }: { children: ReactNode }) => <div>{children}</div> },
+        image: <ChartPreview.PlotImage src="plot.svg" alt="Plot" />,
+        legend: <ChartPreview.PlotLegend src="legend.svg" alt="Legend" />
+    };
+    render(<ChartPreview {...props} />);
+}
+
+describe("ChartPreview", () => {
+    it("fills the available width up to the legend size", () => {
+        renderPreview(true);
+
+        const chart = screen.getByRole("img", { name: "Plot" }).parentElement!;
+        expect(chart.style.width).toBe("100%");
+        expect(chart.parentElement!.style.display).toBe("flex");
+        expect(chart.parentElement!.style.maxWidth).toBe("385px");
+        expect(screen.getByRole("img", { name: "Legend" }).style.flexShrink).toBe("0");
+    });
+
+    it("caps the width at the plot size when the legend is hidden", () => {
+        renderPreview(false);
+
+        const chart = screen.getByRole("img", { name: "Plot" }).parentElement!;
+        expect(chart.parentElement!.style.maxWidth).toBe("300px");
+        expect(screen.queryByRole("img", { name: "Legend" })).toBeNull();
+    });
+
+    it("lets the plot image shrink instead of overflowing", () => {
+        renderPreview(true);
+
+        const plot = screen.getByRole("img", { name: "Plot" });
+        expect(plot.style.width).toBe("");
+        expect(plot.style.minWidth).toMatch(/^0(px)?$/);
+    });
+});