dosubot[bot] commented on issue #36204:
URL: https://github.com/apache/superset/issues/36204#issuecomment-3600945189
<!-- Answer -->
You're exactly right—the missing `.ant-layout` wrapper and its `box-sizing:
border-box` style in the embedded dashboard is the root cause of the spacing
issue. This global style ensures consistent sizing and padding for charts in
the main app, but it's absent in the iframe embed, leading to the layout
discrepancies you described. Injecting a CSS rule like:
```css
.dashboard-component-chart-holder {
width: 100%;
box-sizing: border-box;
}
```
into the embedded dashboard context restores the expected spacing and makes
the embedded view visually match the original
[source](https://github.com/apache/superset/issues/35900).
For iframe-based embedding (using the official SDK), this CSS injection is
the most effective workaround. If you're embedding via direct DOM injection
(not using an iframe), recent changes added a scoped stylesheet
(`embed-overrides.less`) under a `.superset-embed` wrapper to restore grid
spacing without affecting standard dashboards
[source](https://github.com/apache/superset/pull/36229).
Theming support for embedded dashboards is improving—Superset 6.0 will let
you customize appearance more robustly, and the SDK now supports dynamic theme
configuration via `setThemeConfig`, though this doesn't directly fix grid
spacing [source](https://github.com/apache/superset/pull/34273).
If you need technical details about where layout and theming are handled in
Superset, let me know!
<!-- Dosu Comment Footer -->
*To reply, just mention [@dosu](https://go.dosu.dev/dosubot).*
---
<sup>How did I do?
[Good](https://app.dosu.dev/response-feedback/daf4d5b1-1bea-45c2-9fd9-5bcd08aa9fa2?feedback_type=great_response)
|
[Irrelevant](https://app.dosu.dev/response-feedback/daf4d5b1-1bea-45c2-9fd9-5bcd08aa9fa2?feedback_type=irrelevant_answer)
|
[Incorrect](https://app.dosu.dev/response-feedback/daf4d5b1-1bea-45c2-9fd9-5bcd08aa9fa2?feedback_type=incorrect_sources)
|
[Verbose](https://app.dosu.dev/response-feedback/daf4d5b1-1bea-45c2-9fd9-5bcd08aa9fa2?feedback_type=too_verbose)
|
[Hallucination](https://app.dosu.dev/response-feedback/daf4d5b1-1bea-45c2-9fd9-5bcd08aa9fa2?feedback_type=hallucination)
| [Report
🐛](https://app.dosu.dev/response-feedback/daf4d5b1-1bea-45c2-9fd9-5bcd08aa9fa2?feedback_type=bug_report)
|
[Other](https://app.dosu.dev/response-feedback/daf4d5b1-1bea-45c2-9fd9-5bcd08aa9fa2?feedback_type=other)</sup>
[](https://app.dosu.dev/a28d3c7e-a9d3-459e-9fb6-3a6f9ff4f357/ask?utm_source=github) [](https://cursor.com/link/prompt?text=You%27re%20exactly%20right%E2%80%94the%20missing%20%60.ant-layout%60%20wrapper%20and%20its%20%60box-sizing%3A%20border-box%60%20style%20in%20the%20embedded%20dashboard%20is%20the%20root%20cause%20of%20the%20spacing%20issue.%20This%20global%20style%20ensures%20consistent%20sizing%20and%20padding%20for%20charts%20in%20the%20main%20app%2C%20but%20it%27s%20absent%20in%20the%20iframe%20embed%2C%20leading%20to%20the%20layout%20discrepancies%20you%20described.%20Injecting%20a%20CSS%20rule%20like%3A%0A%0A%60%60%60css%0A.dashboard-component-chart-holder%20%7B%0A%20%20width%3A%20100%25%3B%0A%20%20box-sizing%3A%20border-box%3B%0A%7D%0A%60%60%60%0A%0Ainto%20the%20embedded%20dashboard%20context%20restores%20the%20expected%20spacing%20and%20makes%20the%20embedde
d%20view%20visually%20match%20the%20original%20%5Bsource%5D%28https%3A//github.com/apache/superset/issues/35900%29.%0A%0AFor%20iframe-based%20embedding%20%28using%20the%20official%20SDK%29%2C%20this%20CSS%20injection%20is%20the%20most%20effective%20workaround.%20If%20you%27re%20embedding%20via%20direct%20DOM%20injection%20%28not%20using%20an%20iframe%29%2C%20recent%20changes%20added%20a%20scoped%20stylesheet%20%28%60embed-overrides.less%60%29%20under%20a%20%60.superset-embed%60%20wrapper%20to%20restore%20grid%20spacing%20without%20affecting%20standard%20dashboards%20%5Bsource%5D%28https%3A//github.com/apache/superset/pull/36229%29.%0A%0ATheming%20support%20for%20embedded%20dashboards%20is%20improving%E2%80%94Superset%206.0%20will%20let%20you%20customize%20appearance%20more%20robustly%2C%20and%20the%20SDK%20now%20supports%20dynamic%20theme%20configuration%20via%20%60setThemeConfig%60%2C%20though%20this%20doesn%27t%20directly%20fix%20grid%20spacing%20%5Bsource%5D%28https%3A//github.co
m/apache/superset/pull/34273%29.%0A%0AIf%20you%20need%20technical%20details%20about%20where%20layout%20and%20theming%20are%20handled%20in%20Superset%2C%20let%20me%20know%21) [](https://go.dosu.dev/discord-bot) [](https://twitter.com/intent/tweet?text=%40dosu_ai%20helped%20me%20solve%20this%20issue!&url=https%3A//github.com/apache/superset/issues/36204)
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
