kevin3274 opened a new pull request, #38536:
URL: https://github.com/apache/superset/pull/38536
## Summary
Embedded dashboards rendered via `superset-embedded-sdk` are missing CSS
rules that the standalone mode gets from antd's `<Layout>` component via
CSS-in-JS. This causes:
1. **Chart gaps disappear** — missing `box-sizing: border-box` means padding
is added outside element width, causing adjacent panels to overlap
2. **Larger fonts, less visible content** — browser defaults to `font-size:
16px` instead of the `14px` that antd's `<Layout>` provides in standalone mode
(~14% larger)
### Root Cause
In **standalone mode**, the component tree is:
```
App.tsx → RootContextProviders → <Layout> → <Layout.Content> → DashboardPage
```
In **embedded mode**, the component tree is:
```
embedded/index.tsx → EmbeddedContextProviders → DashboardPage
```
antd v5 uses CSS-in-JS with on-demand injection — component-level CSS is
only injected when the component renders. Since embedded mode never renders
`<Layout>`, the following CSS rules are never injected:
```css
:where(.css-hash).ant-layout,
:where(.css-hash).ant-layout * {
box-sizing: border-box;
}
.ant-layout {
font-size: 14px;
}
```
### Fix
Added an `EmbeddedGlobalStyles` component that injects the missing CSS rules
using Emotion's `<Global>` component, using the theme's `fontSize` token for
consistency:
- `box-sizing: border-box` on `*, *::before, *::after`
- `font-size` on `body` using `theme.fontSize` (default 14px from antd)
### Related PRs
- #38351 — fixes only `box-sizing` (approved, on hold for testing)
- #36375 — fixes only `box-sizing` (maintainer requested scoping)
- #37528 — fixes only `box-sizing` on `.dashboard-component-chart-holder`
This PR extends the approach of #38351 to **also fix the font-size
discrepancy**, which none of the existing PRs address.
Fixes #37493
## Test Plan
- [ ] Embed a dashboard using `superset-embedded-sdk`
- [ ] Verify no horizontal scrollbar / chart overlap (box-sizing fix)
- [ ] Verify font size matches standalone mode (~14px, not 16px)
- [ ] Verify standalone dashboard rendering is unaffected
- [ ] Verify embedded dashboard with custom theme still works
🤖 Generated with [Claude Code](https://claude.com/claude-code)
--
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]
