Remove default container width for altair charts

[Light2Dark]

📝 Summary

Fixes #8596.

Frontend:

• .vega-embed no longer gets blanket width: 100%; uses max-width: 100% instead
• A vega-container-width CSS class restores width: 100% only when the spec explicitly uses width: "container" (used by the data explorer and respected for user-set specs)

Backend:

• Remove maybe_make_full_width calls from the Altair formatter and mo.ui.altair_chart
• Remove other unused functions

🔍 Description of Changes

📋 Checklist

• I have read the contributor guidelines.
• For large changes, or changes that affect the public API: this change was discussed or approved through an issue, on Discord, or the community discussions (Please provide a link if applicable).
• Tests have been added for the changes made.
• Documentation has been updated where applicable, including docstrings for API changes.
• Pull request title is a good summary of the changes - it will be used in the release notes.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
marimo-docs	Ready	Preview, Comment	Mar 16, 2026 4:20pm

[Copilot]

Pull request overview

Removes Marimo’s prior behavior of forcing Altair/Vega-Lite charts to stretch to the notebook container width by default, aligning rendered output more closely with Altair defaults (Fixes #8596).

Changes:

• Stop mutating Altair specs to apply width="container" and related vconcat autosize adjustments.
• Update Vega embed styling so full-width rendering only happens when the spec explicitly uses width: "container".
• Adjust tests to reflect the new default-width behavior.

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
marimo/_plugins/ui/_impl/altair_chart.py	Removes default full-width/vconcat sizing mutations from mo.ui.altair_chart.
marimo/_output/formatters/altair_formatters.py	Stops forcing width="container" in the Altair output formatter.
frontend/src/plugins/impl/vega/vega.css	Makes full-width styling conditional via .vega-container-width.
frontend/src/plugins/impl/vega/vega-component.tsx	Adds conditional .vega-container-width wrapper class based on spec.width === "container".
frontend/src/plugins/impl/data-explorer/ConnectedDataExplorerComponent.tsx	Ensures the data explorer’s container-width charts still expand by applying .vega-container-width.
tests/_plugins/ui/_impl/test_altair_chart.py	Removes tests tied to old width/autosize mutation logic; adds a new default-autosize expectation.
tests/_output/formatters/test_altair_formatters.py	Updates formatter test to assert default width isn’t forcibly applied.

Comments suppressed due to low confidence (1)

frontend/src/plugins/impl/vega/vega-component.tsx:318

• vega-container-width is applied to the wrapper <div> here, but the element that useVegaEmbed populates is the nested <div ref={vegaRef} />. If the generated .vega-embed ends up inside that ref element (common for vega-embed), the CSS rule .vega-container-width > .vega-embed won’t match and container-width charts may not actually expand. Consider moving vega-container-width onto the vegaRef element (or adjusting the CSS selector to target descendants) so width=container reliably results in full-width rendering.

      <div
        className={cn(
          "relative",
          "width" in selectableSpec &&
            selectableSpec.width === "container" &&
            "vega-container-width",
        )}
        // Capture the pointer down event to prevent the parent from handling it
        onPointerDown={Events.stopPropagation()}
      >
        <div ref={vegaRef} />
        {renderHelpContent()}

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[manzt]

Thanks! Just a couple of minor comments.

[manzt]

I think this may be redundant / already set with vega-embed-wrapper but probably good to duplicate max-width here as a guard in case the wrapper isn't present (e.g., shadow DOM or custom rendering). Maybe add a comment why?

[manzt]

I'm wondering if we should have some explicit flag that "this was set by us" instead of inspecting the spec which could come from a user or us? Might be overkill.

[github-actions]

🚀 Development release published. You may be able to view the changes at https://marimo.app?v=0.20.5-dev88

[joelostblom]

Thank you for this!