dosubot[bot] commented on issue #36204:
URL: https://github.com/apache/superset/issues/36204#issuecomment-3557667481

   <!-- Greeting -->
   Hi @NeBene! I'm [Dosu](https://go.dosu.dev/dosubot) and I’m helping the 
superset team.
   
   <!-- Answer -->
   This is a known issue: embedded dashboards sometimes lose spacing between 
charts because the embedded iframe doesn't include some of the global styles 
(like the top-level `ant-layout` class and its `box-sizing: border-box` style) 
that the main Superset app uses. This affects how charts and components are 
rendered inside the iframe, leading to the layout problems you described.
   
   A common workaround is to inject the following CSS into the embedded 
dashboard context to restore proper spacing:
   
   ```css
   .dashboard-component-chart-holder {
     width: 100%;
     box-sizing: border-box;
   }
   ```
   
   You can inject this CSS dynamically (for example, using a postMessage 
handler or by customizing your Superset instance to append styles to the 
iframe). Also, make sure your iframe and its parent container match the native 
dashboard's dimensions and don't have conflicting CSS constraints, which can 
help avoid unnecessary scrollbars. More details and discussion are available in 
this related issue: [source](https://github.com/apache/superset/issues/35900).
   
   Currently, there are no official configuration options in the embedded SDK 
to control layout or spacing between charts, but systemic theming support is 
under development for future releases. If you want to further customize the 
look, you can use the `setThemeConfig` API in the embedded SDK to tweak theme 
tokens, but this won't directly address the spacing issue unless you 
specifically target the affected classes.
   
   If you continue to see issues, check for browser console errors and try in 
other browsers to rule out browser-specific quirks.
   
   
   <!-- 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/ec16cc1f-555d-4a61-8021-29e033336a64?feedback_type=great_response)
 | 
[Irrelevant](https://app.dosu.dev/response-feedback/ec16cc1f-555d-4a61-8021-29e033336a64?feedback_type=irrelevant_answer)
 | 
[Incorrect](https://app.dosu.dev/response-feedback/ec16cc1f-555d-4a61-8021-29e033336a64?feedback_type=incorrect_sources)
 | 
[Verbose](https://app.dosu.dev/response-feedback/ec16cc1f-555d-4a61-8021-29e033336a64?feedback_type=too_verbose)
 | 
[Hallucination](https://app.dosu.dev/response-feedback/ec16cc1f-555d-4a61-8021-29e033336a64?feedback_type=hallucination)
 | [Report 
šŸ›](https://app.dosu.dev/response-feedback/ec16cc1f-555d-4a61-8021-29e033336a64?feedback_type=bug_report)
 | 
[Other](https://app.dosu.dev/response-feedback/ec16cc1f-555d-4a61-8021-29e033336a64?feedback_type=other)</sup>&nbsp;&nbsp;[![Chat
 with 
Dosu](https://dosu.dev/dosu-chat-badge.svg)](https://app.dosu.dev/a28d3c7e-a9d3-459e-9fb6-3a6f9ff4f357/ask?utm_source=githu
 b)&nbsp;[![Join 
Discord](https://img.shields.io/badge/join-5865F2?logo=discord&logoColor=white&label=)](https://go.dosu.dev/discord-bot)&nbsp;[![Share
 on 
X](https://img.shields.io/badge/X-share-black)](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]

Reply via email to