Remove matplotlib stretch effect in mo.ui.matplotlib #8883
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
There was a problem hiding this comment.
Pull request overview
This PR adjusts the frontend matplotlib UI renderer to prevent unintended canvas stretching caused by CSS width constraints, improving visual fidelity of mo.ui.matplotlib outputs.
Changes:
- Removed a hardcoded
canvas.style.maxWidth = "100%"from the matplotlib canvas setup to avoid non-uniform scaling/stretching.
Comment on lines
303
to
304
| canvas.style.width = `${this.#state.width}px`; | ||
| canvas.style.height = `${this.#state.height}px`; |
There was a problem hiding this comment.
Removing canvas.style.maxWidth = "100%" avoids the non-uniform scaling/stretching, but it also means large figures can no longer be constrained to the output width. In particular, .marimo-cell.published .output-area uses overflow: visible (see frontend/src/css/app/Cell.css), so a wide matplotlib canvas can overflow the viewport/layout in published/read modes.
If you still want width-constrained rendering without stretching, consider keeping a width constraint (e.g. max-width: 100%) while making the height scale proportionally (e.g. don’t set a fixed CSS height; use height: auto / an aspect-ratio-based approach) so the canvas is uniformly scaled when it needs to fit smaller containers.
Suggested change
| canvas.style.width = `${this.#state.width}px`; | |
| canvas.style.height = `${this.#state.height}px`; | |
| // Use responsive sizing: constrain width to container and preserve aspect ratio | |
| canvas.style.width = `${this.#state.width}px`; | |
| canvas.style.maxWidth = "100%"; | |
| canvas.style.height = "auto"; | |
| canvas.style.aspectRatio = `${this.#state.width} / ${this.#state.height}`; |
Contributor
There was a problem hiding this comment.
this is probably a good suggestion (but would need some manual testing)
Bundle ReportChanges will decrease total bundle size by 805.49kB (-3.15%) ⬇️. This is within the configured threshold ✅ Detailed changes
Affected Assets, Files, and Routes:view changes for bundle: marimo-esmAssets Changed:
Files in
|
When maxWidth: 100% constrained a wide canvas (e.g. figsize=(20,6)), the fixed CSS height caused non-uniform scaling. Use height: auto with aspect-ratio so the canvas scales proportionally. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
mscolnick
approved these changes
Mar 26, 2026
Light2Dark
approved these changes
Mar 27, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
📝 Summary
Before:
Notice that we're stretching a bit here:
Extreme example:
Applying CSS rules in hindsight trips up matplotlib. So I figured removing the hardcoded
maxWidth.After:
This feels better but here is a consequence: the resulting widget may not fit the cell output width anymore if the width is set too high. But that feels like a fair thing for this widget.