Charts withing "Tabs" layout element ignores spacing

[eYbulani]

Screenshot

With Tabs

Without Tabs

Description

While using "Tabs" Layout element the spacing between the charts is lost, the distinction between the charts is lost.
This is happening with the superset dashboard and embedded dashboard both. Any idea or workaround how to fix this.
I had the same problem with other charts in embedded dashboard but using this discussion's workaround (#36204) it was fixed for now. But for Tabs it is still a issue.

Superset version

master / 6.0.0

Python version

I don't know

Node version
16

Browser
Chrome/Edge

[sadpandajoe]

@dosu investigate

[dosubot]

After investigating, this is the same box-sizing CSS issue documented in #36204, not a tabs-specific problem.

Root Cause

In embedded dashboards, the .ant-layout wrapper (which provides box-sizing: border-box globally) is absent. This causes .dashboard-component-chart-holder elements to default to content-box, and since they have 32px padding on all sides, the total width overflows the container, causing charts to overlap and lose visible spacing.

This affects all layout types (Rows, Columns, and Tabs) equally—they all use the same .dashboard-component-chart-holder class.

Why Tabs May Appear Worse

Tabs have multiple layers of spacing and apply spacing in both edit and view modes, unlike Rows/Columns which only apply spacing in view mode. This can make the box-sizing overflow more visually apparent.

Workaround

The same CSS fix from #36204 should work for tabs. Apply via CSS template or custom CSS injection:

.dashboard-component-chart-holder {
    width: 100%;
    box-sizing: border-box;
}

Or globally:

*, *::before, *::after {
  box-sizing: border-box;
}

Status

PR #36375 proposes adding box-sizing: border-box to the core codebase, which would fix this for all layouts including tabs, but it hasn't been merged yet.

If the workaround above isn't working for your specific case, could you share what CSS you've tried and where you're applying it? That would help determine if there's something unique about your configuration.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}

   

[Mayankaggarwal8055]

@​sadpandajoe @hainenber I’ve submitted a PR to address this issue.

The fix applies box-sizing: border-box to .dashboard-component-chart-holder,
which prevents overflow caused by padding and restores proper spacing between charts inside Tabs.

This aligns with the workaround discussed in #36204. Would appreciate your review.

[kendallperry050-sudo]

Thanks for the clarification! Makes sense that this is the same box-sizing: border-box issue as #36204. Applying that CSS fix—either via custom CSS or waiting for PR #36375—should restore proper spacing between charts in Tabs as well.

…

On Wed, Mar 18, 2026, 1:26 PM dosubot[bot] ***@***.***> wrote: *dosubot[bot]* left a comment (apache/superset#38709) <#38709 (comment)> After investigating, this is *the same box-sizing CSS issue* documented in #36204 <#36204>, not a tabs-specific problem. Root Cause In embedded dashboards, the .ant-layout wrapper (which provides box-sizing: border-box globally) is absent. This causes .dashboard-component-chart-holder elements to default to content-box, and since they have 32px padding on all sides <https://github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx#L317-L323>, the total width overflows the container, causing charts to overlap and lose visible spacing. This affects *all layout types* (Rows, Columns, and Tabs) equally—they all use the same .dashboard-component-chart-holder class <https://github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/src/dashboard/components/gridComponents/ChartHolder.tsx#L264-L270> . Why Tabs May Appear Worse Tabs have multiple layers of spacing <https://github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx#L249-L252> and apply spacing in both edit and view modes <https://github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/src/dashboard/components/gridComponents/Tabs.jsx#L99>, unlike Rows/Columns which only apply spacing in view mode. This can make the box-sizing overflow more visually apparent. Workaround The same CSS fix from #36204 <#36204> should work for tabs. Apply via CSS template or custom CSS injection: .dashboard-component-chart-holder { width: 100%; box-sizing: border-box; } Or globally: *, *::before, *::after { box-sizing: border-box; } Status PR #36375 <#36375> proposes adding box-sizing: border-box to the core codebase, which would fix this for all layouts including tabs, but it hasn't been merged yet. If the workaround above isn't working for your specific case, could you share what CSS you've tried and where you're applying it? That would help determine if there's something unique about your configuration. *To reply, just mention @dosu <https://go.dosu.dev/dosubot?utm_source=github&utm_medium=bot-comment&utm_campaign=github-assistant&utm_content=brand-link>.* ------------------------------ How did I do? Good <https://app.dosu.dev/response-feedback/89034ac6-492a-4988-88a7-ec56fabd6e39?feedback_type=great_response&utm_source=github&utm_medium=bot-comment&utm_campaign=github-assistant&utm_content=feedback-great_response> | Irrelevant <https://app.dosu.dev/response-feedback/89034ac6-492a-4988-88a7-ec56fabd6e39?feedback_type=irrelevant_answer&utm_source=github&utm_medium=bot-comment&utm_campaign=github-assistant&utm_content=feedback-irrelevant_answer> | Incorrect <https://app.dosu.dev/response-feedback/89034ac6-492a-4988-88a7-ec56fabd6e39?feedback_type=incorrect_sources&utm_source=github&utm_medium=bot-comment&utm_campaign=github-assistant&utm_content=feedback-incorrect_sources> | Verbose <https://app.dosu.dev/response-feedback/89034ac6-492a-4988-88a7-ec56fabd6e39?feedback_type=too_verbose&utm_source=github&utm_medium=bot-comment&utm_campaign=github-assistant&utm_content=feedback-too_verbose> | Hallucination <https://app.dosu.dev/response-feedback/89034ac6-492a-4988-88a7-ec56fabd6e39?feedback_type=hallucination&utm_source=github&utm_medium=bot-comment&utm_campaign=github-assistant&utm_content=feedback-hallucination> | Report 🐛 <https://app.dosu.dev/response-feedback/89034ac6-492a-4988-88a7-ec56fabd6e39?feedback_type=bug_report&utm_source=github&utm_medium=bot-comment&utm_campaign=github-assistant&utm_content=feedback-bug_report> | Other <https://app.dosu.dev/response-feedback/89034ac6-492a-4988-88a7-ec56fabd6e39?feedback_type=other&utm_source=github&utm_medium=bot-comment&utm_campaign=github-assistant&utm_content=feedback-other> [image: Chat with Dosu] <https://app.dosu.dev/a28d3c7e-a9d3-459e-9fb6-3a6f9ff4f357/ask?utm_source=github&utm_medium=bot-comment&utm_campaign=github-assistant&utm_content=chat-badge> [image: Open in Cursor] <https://cursor.com/link/prompt?text=After%20investigating%2C%20this%20is%20%2A%2Athe%20same%20%60box-sizing%60%20CSS%20issue%2A%2A%20documented%20in%20%5B%2336204%5D%28https%3A//github.com/apache/superset/issues/36204%29%2C%20not%20a%20tabs-specific%20problem.%0A%0A%23%23%20Root%20Cause%0A%0AIn%20embedded%20dashboards%2C%20the%20%60.ant-layout%60%20wrapper%20%28which%20provides%20%60box-sizing%3A%20border-box%60%20globally%29%20is%20absent.%20This%20causes%20%60.dashboard-component-chart-holder%60%20elements%20to%20default%20to%20%60content-box%60%2C%20and%20since%20they%20have%20%5B32px%20padding%20on%20all%20sides%5D%28https%3A//github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx%23L317-L323%29%2C%20the%20total%20width%20overflows%20the%20container%2C%20causing%20charts%20to%20overlap%20and%20lose%20visible%20spacing.%0A%0AThis%20affects%20%2A%2Aall%20layout%20types%2A%2A%20%28Rows%2C%20Columns%2C%20and%20Tabs%29%20equally%E2%80%94they%20all%20use%20the%20same%20%5B%60.dashboard-component-chart-holder%60%20class%5D%28https%3A//github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/src/dashboard/components/gridComponents/ChartHolder.tsx%23L264-L270%29.%0A%0A%23%23%20Why%20Tabs%20May%20Appear%20Worse%0A%0ATabs%20have%20%5Bmultiple%20layers%20of%20spacing%5D%28https%3A//github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx%23L249-L252%29%20and%20apply%20spacing%20%5Bin%20both%20edit%20and%20view%20modes%5D%28https%3A//github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/src/dashboard/components/gridComponents/Tabs.jsx%23L99%29%2C%20unlike%20Rows/Columns%20which%20only%20apply%20spacing%20in%20view%20mode.%20This%20can%20make%20the%20box-sizing%20overflow%20more%20visually%20apparent.%0A%0A%23%23%20Workaround%0A%0AThe%20same%20CSS%20fix%20from%20%2336204%20should%20work%20for%20tabs.%20Apply%20via%20CSS%20template%20or%20custom%20CSS%20injection%3A%0A%0A%60%60%60css%0A.dashboard-component-chart-holder%20%7B%0A%20%20%20%20width%3A%20100%25%3B%0A%20%20%20%20box-sizing%3A%20border-box%3B%0A%7D%0A%60%60%60%0A%0AOr%20globally%3A%0A%60%60%60css%0A%2A%2C%20%2A%3A%3Abefore%2C%20%2A%3A%3Aafter%20%7B%0A%20%20box-sizing%3A%20border-box%3B%0A%7D%0A%60%60%60%0A%0A%23%23%20Status%0A%0A%5BPR%20%2336375%5D%28https%3A//github.com/apache/superset/pull/36375%29%20proposes%20adding%20%60box-sizing%3A%20border-box%60%20to%20the%20core%20codebase%2C%20which%20would%20fix%20this%20for%20all%20layouts%20including%20tabs%2C%20but%20it%20hasn%27t%20been%20merged%20yet.%0A%0AIf%20the%20workaround%20above%20isn%27t%20working%20for%20your%20specific%20case%2C%20could%20you%20share%20what%20CSS%20you%27ve%20tried%20and%20where%20you%27re%20applying%20it%3F%20That%20would%20help%20determine%20if%20there%27s%20something%20unique%20about%20your%20configuration.> [image: Join Discord] <https://go.dosu.dev/discord-bot?utm_source=github&utm_medium=bot-comment&utm_campaign=github-assistant&utm_content=join-discord> [image: Share on X] <https://twitter.com/intent/tweet?text=%40dosu_ai%20helped%20me%20solve%20this%20issue!&url=https%3A//github.com/apache/superset/issues/38709> — Reply to this email directly, view it on GitHub <#38709 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/B7X556UF7NCC5ORY7MLPHHL4RLS6FAVCNFSM6AAAAACWWDJWLCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHM2DAOBUGI4TQNJRGA> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>