diff --git a/packages/pluggableWidgets/area-chart-web/CHANGELOG.md b/packages/pluggableWidgets/area-chart-web/CHANGELOG.md
index 51cc6f0a39..f70de6167b 100644
--- a/packages/pluggableWidgets/area-chart-web/CHANGELOG.md
+++ b/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
diff --git a/packages/pluggableWidgets/bar-chart-web/CHANGELOG.md b/packages/pluggableWidgets/bar-chart-web/CHANGELOG.md
index 482886e036..c9d1557ae5 100644
--- a/packages/pluggableWidgets/bar-chart-web/CHANGELOG.md
+++ b/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
diff --git a/packages/pluggableWidgets/bubble-chart-web/CHANGELOG.md b/packages/pluggableWidgets/bubble-chart-web/CHANGELOG.md
index a9cdfe0c0a..d4ab094c84 100644
--- a/packages/pluggableWidgets/bubble-chart-web/CHANGELOG.md
+++ b/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
diff --git a/packages/pluggableWidgets/column-chart-web/CHANGELOG.md b/packages/pluggableWidgets/column-chart-web/CHANGELOG.md
index 87a8314a72..352c001ab8 100644
--- a/packages/pluggableWidgets/column-chart-web/CHANGELOG.md
+++ b/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
diff --git a/packages/pluggableWidgets/heatmap-chart-web/CHANGELOG.md b/packages/pluggableWidgets/heatmap-chart-web/CHANGELOG.md
index 870a698e66..7f46d912cf 100644
--- a/packages/pluggableWidgets/heatmap-chart-web/CHANGELOG.md
+++ b/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
diff --git a/packages/pluggableWidgets/line-chart-web/CHANGELOG.md b/packages/pluggableWidgets/line-chart-web/CHANGELOG.md
index fc4fdb00a0..28b09ee4aa 100644
--- a/packages/pluggableWidgets/line-chart-web/CHANGELOG.md
+++ b/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
diff --git a/packages/pluggableWidgets/pie-doughnut-chart-web/CHANGELOG.md b/packages/pluggableWidgets/pie-doughnut-chart-web/CHANGELOG.md
index 014c035684..b4b7d888e2 100644
--- a/packages/pluggableWidgets/pie-doughnut-chart-web/CHANGELOG.md
+++ b/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
diff --git a/packages/pluggableWidgets/time-series-chart-web/CHANGELOG.md b/packages/pluggableWidgets/time-series-chart-web/CHANGELOG.md
index 24cbd06650..db16b95a1d 100644
--- a/packages/pluggableWidgets/time-series-chart-web/CHANGELOG.md
+++ b/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
diff --git a/packages/shared/charts/src/components/ChartPreview.tsx b/packages/shared/charts/src/components/ChartPreview.tsx
index 44b17af8fc..c80cc66690 100644
--- a/packages/shared/charts/src/components/ChartPreview.tsx
+++ b/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"
             }}
         >
diff --git a/packages/shared/charts/src/components/__tests__/ChartPreview.spec.tsx b/packages/shared/charts/src/components/__tests__/ChartPreview.spec.tsx
new file mode 100644
index 0000000000..060454428c
--- /dev/null
+++ b/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)?$/);
+    });
+});