From f7bf4f923550dd9971d8129942dc05153f6440d3 Mon Sep 17 00:00:00 2001
From: Samuel Reichert <samuelreichertt@gmail.com>
Date: Thu, 8 Oct 2026 15:18:28 +0200
Subject: [PATCH] fix(shared-charts): keep chart preview within its container
 in design mode

The design mode preview used fixed widths (385px with legend, 300px
without) and an inline-flex wrapper, so in narrow containers it overflowed
and overlapped neighbouring widgets. The preview now fills the available
width, capped at the previous size, and the plot image shrinks while the
legend keeps its width.

WC-3594

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../area-chart-web/CHANGELOG.md               |  4 ++
 .../bar-chart-web/CHANGELOG.md                |  4 ++
 .../bubble-chart-web/CHANGELOG.md             |  4 ++
 .../column-chart-web/CHANGELOG.md             |  4 ++
 .../heatmap-chart-web/CHANGELOG.md            |  4 ++
 .../line-chart-web/CHANGELOG.md               |  4 ++
 .../pie-doughnut-chart-web/CHANGELOG.md       |  4 ++
 .../time-series-chart-web/CHANGELOG.md        |  4 ++
 .../charts/src/components/ChartPreview.tsx    | 14 +++++--
 .../__tests__/ChartPreview.spec.tsx           | 42 +++++++++++++++++++
 10 files changed, 84 insertions(+), 4 deletions(-)
 create mode 100644 packages/shared/charts/src/components/__tests__/ChartPreview.spec.tsx

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)?$/);
+    });
+});