dosubot[bot] commented on issue #37493: URL: https://github.com/apache/superset/issues/37493#issuecomment-3805978394
<!-- Greeting --> Hi @mat-k-witts! I'm [Dosu](https://go.dosu.dev/dosubot) and I’m helping the superset team. <!-- Answer --> This overlap issue in embedded dashboards happens because the main Superset app applies `box-sizing: border-box` globally via the `.ant-layout` wrapper, but embedded dashboards don't include this wrapper. As a result, `.dashboard-component-chart-holder` defaults to `box-sizing: content-box`, so its padding increases the effective width and causes panels to encroach on each other. This doesn't occur in the native UI because the global style is present there. Your workaround—adding `.dashboard-component-chart-holder { box-sizing: border-box; }`—is the recommended fix and is documented in several GitHub issues and discussions. You can also apply this globally or scope it to a wrapper if you want to avoid side effects on other components. For example, if you embed via DOM injection (not iframe), you can wrap your embed in a custom class (like `.superset-embed`) and scope the CSS fix to that wrapper for safety. There is currently no official way to inherit global styles from the main app in embedded dashboards, but systemic theming support is under development for future releases. More details and alternative approaches are discussed in these threads: - [Issue 36204](https://github.com/apache/superset/issues/36204) - [Issue 35900](https://github.com/apache/superset/issues/35900) - [PR 36375](https://github.com/apache/superset/pull/36375) <!-- 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/d74e6de7-6556-4766-9fe0-12eeec1a2ad4?feedback_type=great_response) | [Irrelevant](https://app.dosu.dev/response-feedback/d74e6de7-6556-4766-9fe0-12eeec1a2ad4?feedback_type=irrelevant_answer) | [Incorrect](https://app.dosu.dev/response-feedback/d74e6de7-6556-4766-9fe0-12eeec1a2ad4?feedback_type=incorrect_sources) | [Verbose](https://app.dosu.dev/response-feedback/d74e6de7-6556-4766-9fe0-12eeec1a2ad4?feedback_type=too_verbose) | [Hallucination](https://app.dosu.dev/response-feedback/d74e6de7-6556-4766-9fe0-12eeec1a2ad4?feedback_type=hallucination) | [Report 🐛](https://app.dosu.dev/response-feedback/d74e6de7-6556-4766-9fe0-12eeec1a2ad4?feedback_type=bug_report) | [Other](https://app.dosu.dev/response-feedback/d74e6de7-6556-4766-9fe0-12eeec1a2ad4?feedback_type=other)</sup> [](https://app.dosu.dev/a28d3c7e-a9d3-459e-9fb6-3a6f9ff4f357/ask?utm_source=github) [](https://cursor.com/link/prompt?text=This%20overlap%20issue%20in%20embedded%20dashboards%20happens%20because%20the%20main%20Superset%20app%20applies%20%60box-sizing%3A%20border-box%60%20globally%20via%20the%20%60.ant-layout%60%20wrapper%2C%20but%20embedded%20dashboards%20don%27t%20include%20this%20wrapper.%20As%20a%20result%2C%20%60.dashboard-component-chart-holder%60%20defaults%20to%20%60box-sizing%3A%20content-box%60%2C%20so%20its%20padding%20increases%20the%20effective%20width%20and%20causes%20panels%20to%20encroach%20on%20each%20other.%20This%20doesn%27t%20occur%20in%20the%20native%20UI%20because%20the%20global%20style%20is%20present%20there.%0A%0AYour%20workaround%E2%80%94adding%20%60.dashboard-component-chart-holder%20%7B%20box-sizing%3A%20border-box%3B%20%7D%60%E2%80%94is%20the %20recommended%20fix%20and%20is%20documented%20in%20several%20GitHub%20issues%20and%20discussions.%20You%20can%20also%20apply%20this%20globally%20or%20scope%20it%20to%20a%20wrapper%20if%20you%20want%20to%20avoid%20side%20effects%20on%20other%20components.%20For%20example%2C%20if%20you%20embed%20via%20DOM%20injection%20%28not%20iframe%29%2C%20you%20can%20wrap%20your%20embed%20in%20a%20custom%20class%20%28like%20%60.superset-embed%60%29%20and%20scope%20the%20CSS%20fix%20to%20that%20wrapper%20for%20safety.%0A%0AThere%20is%20currently%20no%20official%20way%20to%20inherit%20global%20styles%20from%20the%20main%20app%20in%20embedded%20dashboards%2C%20but%20systemic%20theming%20support%20is%20under%20development%20for%20future%20releases.%20More%20details%20and%20alternative%20approaches%20are%20discussed%20in%20these%20threads%3A%20%20%0A-%20%5BIssue%2036204%5D%28https%3A//github.com/apache/superset/issues/36204%29%20%20%0A-%20%5BIssue%2035900%5D%28https%3A//github.com/apache/superset/issu es/35900%29%20%20%0A-%20%5BPR%2036375%5D%28https%3A//github.com/apache/superset/pull/36375%29) [](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/37493) -- 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]
