Skip to content

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

Draft
samuelreichert wants to merge 1 commit into
mainfrom
fix/wc-3594_chart-preview-overflow
Draft

samuelreichert wants to merge 1 commit into
mainfrom
fix/wc-3594_chart-preview-overflow

Conversation

@samuelreichert

Copy link
Copy Markdown
Contributor

Pull request type

Bug fix (non-breaking change which fixes an issue)


Description

In Studio Pro design mode, the preview of the Area, Bar, Bubble, Column, Heat map, Line, Pie/Doughnut and Time series charts overflowed narrow containers (e.g. a col-4 layout grid column) and overlapped the neighbouring widgets.

Cause: the shared ChartPreview rendered the chart with fixed widths (385px with legend, 300px without) and the plot image with a fixed 300px width, inside an inline-flex wrapper. When the container was narrower than that, the content overflowed visibly on top of the next column.

Fix (minimal, preview only):

  • Root wrapper is now display: flex with max-width set to the previous size (385px / 300px).
  • The chart area uses width: 100%, so it fills the available width up to that cap.
  • The plot image can shrink (flex: 1 1 0; min-width: 0) and the legend keeps its 85px width (flex: none).

When there is enough room, the preview keeps its current size (385×232 / 300×232). It only shrinks when the container is narrower. The runtime chart is not affected. Custom chart uses its own preview and is not affected either.

Also added a unit test for ChartPreview and an Unreleased → Fixed changelog entry to each affected chart package.

What should be covered while testing?

  1. In Studio Pro design mode, add a layout grid with three col-4 columns. Put a Line chart in the first column and a Text widget in the second.
    • Before: the chart overlaps the Text widget.
    • After: the chart stays inside its column.
  2. Add the chart using both the "+" icon and drag and drop.
  3. Toggle "Show legend" (and "Show scale" for the Heat map). The legend should stay fully visible and the plot should shrink.
  4. In a full-width column, the preview should look the same as before.
  5. Quick check of the other affected charts: Area, Bar, Bubble, Column, Heat map, Pie/Doughnut and Time series (including the range slider image).

🤖 Generated with Claude Code

… 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant