fix(embedded): add box-sizing and font-size reset for embedded dashboards by kevin3274 · Pull Request #38536 · apache/superset

kevin3274 · 2026-03-10T03:40:10Z

User description

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:

Chart gaps disappear — missing box-sizing: border-box means padding is added outside element width, causing adjacent panels to overlap
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:

: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

fix: add embedded box sizing rule for layout #38351 — fixes only box-sizing (approved, on hold for testing)
fix(dashboard): embedded dashboard box sizing #36375 — fixes only box-sizing (maintainer requested scoping)
feat: Add explicit box-sizing to chart holders for consistent embedde… #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

CodeAnt-AI Description

Restore layout box-sizing and font size in embedded dashboards

What Changed

Embedded dashboards now include a global CSS reset that applies box-sizing: border-box to all elements
The page font size in embedded mode is set to the theme's font size (matching standalone dashboards)
Chart panel spacing and text density in embedded dashboards match standalone rendering, preventing overlap and oversized text

Impact

✅ Restored chart gaps and spacing in embedded dashboards
✅ Consistent font size between embedded and standalone dashboards
✅ Fewer layout overlaps in embedded embeds

💡 Usage Guide

Checking Your Pull Request

Every time you make a pull request, our system automatically looks through it. We check for security issues, mistakes in how you're setting up your infrastructure, and common code problems. We do this to make sure your changes are solid and won't cause any trouble later.

Talking to CodeAnt AI

Got a question or need a hand with something in your pull request? You can easily get in touch with CodeAnt AI right here. Just type the following in a comment on your pull request, and replace "Your question here" with whatever you want to ask:

@codeant-ai ask: Your question here

This lets you have a chat with CodeAnt AI about your pull request, making it easier to understand and improve your code.

Example

@codeant-ai ask: Can you suggest a safer alternative to storing this secret?

Preserve Org Learnings with CodeAnt

You can record team preferences so CodeAnt AI applies them in future reviews. Reply directly to the specific CodeAnt AI suggestion (in the same thread) and replace "Your feedback here" with your input:

@codeant-ai: Your feedback here

This helps CodeAnt AI learn and adapt to your team's coding style and standards.

Example

@codeant-ai: Do not flag unused imports.

Retrigger review

Ask CodeAnt AI to review the PR again, by typing:

@codeant-ai: review

Check Your Repository Health

To analyze the health of your code repository, visit our dashboard at https://app.codeant.ai. This tool helps you identify potential issues and areas for improvement in your codebase, ensuring your repository maintains high standards of code health.

…ards In standalone mode, antd's <Layout> component injects `box-sizing: border-box` and `font-size: 14px` via CSS-in-JS. Embedded mode does not render <Layout>, so these rules are never injected, causing: 1. Chart spacing/gaps to disappear (missing box-sizing) 2. Larger font rendering with less visible content (browser default 16px vs 14px) This adds an EmbeddedGlobalStyles component that uses the theme's fontSize token to ensure consistent rendering between standalone and embedded modes. Fixes apache#37493

bito-code-review · 2026-03-10T03:40:20Z

Code Review Agent Run #86bca9

Actionable Suggestions - 0

Review Details

Files reviewed - 1 · Commit Range: 87b3cf0..87b3cf0
- superset-frontend/src/embedded/index.tsx
Files skipped - 0
Tools
- Whispers (Secret Scanner) - ✔︎ Successful
- Detect-secrets (Secret Scanner) - ✔︎ Successful

Bito Usage Guide

Commands

Type the following command in the pull request comment and save the comment.

/review - Manually triggers a full AI review.
/pause - Pauses automatic reviews on this pull request.
/resume - Resumes automatic reviews.
/resolve - Marks all Bito-posted review comments as resolved.
/abort - Cancels all in-progress reviews.

Refer to the documentation for additional commands.

Configuration

This repository uses Superset You can customize the agent settings here or contact your Bito workspace admin at evan@preset.io.

Documentation & Help

AI Code Review powered by

netlify · 2026-03-10T03:45:45Z

✅ Deploy Preview for superset-docs-preview ready!

Name	Link
🔨 Latest commit	`87b3cf0`
🔍 Latest deploy log	https://app.netlify.com/projects/superset-docs-preview/deploys/69af929ea879a100089ae404
😎 Deploy Preview	https://deploy-preview-38536--superset-docs-preview.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

msyavuz · 2026-03-11T09:32:24Z

I already have an approved pr to fix box-sizing here: #38351. Can you include the change for font-sizes on top of that? Thank you for fixing these!

Copilot

Pull request overview

Adds missing global CSS rules to embedded dashboard rendering so embedded mode matches standalone antd <Layout> defaults (fixing panel overlap from missing box-sizing and oversized text from missing font-size).

Changes:

Introduce EmbeddedGlobalStyles that injects a box-sizing: border-box reset for all elements in embedded mode.
Set embedded body font-size using the active Superset theme token (theme.fontSize) to align with standalone dashboards.
Render the new global styles within EmbeddedContextProviders so they inherit the correct theme.

You can also share your feedback on Copilot code review. Take the survey.

pull-request-size bot added the size/M label Mar 10, 2026

codeant-ai-for-open-source bot added the size:M This PR changes 30-99 lines, ignoring generated files label Mar 10, 2026

dosubot bot added the embedded label Mar 10, 2026

sadpandajoe requested review from Vitor-Avila, Copilot and msyavuz March 17, 2026 17:21

Copilot started reviewing on behalf of sadpandajoe March 17, 2026 17:24 View session

Copilot AI reviewed Mar 17, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(embedded): add box-sizing and font-size reset for embedded dashboards#38536

fix(embedded): add box-sizing and font-size reset for embedded dashboards#38536
kevin3274 wants to merge 1 commit intoapache:masterfrom
kh2u:fix/embedded-box-sizing-and-font-size

kevin3274 commented Mar 10, 2026 •

edited by codeant-ai-for-open-source bot

Loading

Uh oh!

bito-code-review bot commented Mar 10, 2026 •

edited

Loading

Code Review Agent Run #86bca9

Uh oh!

netlify bot commented Mar 10, 2026

Uh oh!

msyavuz commented Mar 11, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

kevin3274 commented Mar 10, 2026 • edited by codeant-ai-for-open-source bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

User description

Summary

Root Cause

Fix

Related PRs

Test Plan

CodeAnt-AI Description

What Changed

Impact

Checking Your Pull Request

Talking to CodeAnt AI

Example

Preserve Org Learnings with CodeAnt

Example

Retrigger review

Check Your Repository Health

Uh oh!

bito-code-review bot commented Mar 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code Review Agent Run #86bca9

Uh oh!

netlify bot commented Mar 10, 2026

✅ Deploy Preview for superset-docs-preview ready!

Uh oh!

msyavuz commented Mar 11, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

kevin3274 commented Mar 10, 2026 •

edited by codeant-ai-for-open-source bot

Loading

bito-code-review bot commented Mar 10, 2026 •

edited

Loading