kendallperry050-sudo commented on issue #38709: URL: https://github.com/apache/superset/issues/38709#issuecomment-4089664209
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) > <https://github.com/apache/superset/issues/38709#issuecomment-4084298510> > > After investigating, this is *the same box-sizing CSS issue* documented > in #36204 <https://github.com/apache/superset/issues/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 > <https://github.com/apache/superset/issues/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 <https://github.com/apache/superset/pull/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.%0 A%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%20i f%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 > <https://github.com/apache/superset/issues/38709#issuecomment-4084298510>, > or unsubscribe > <https://github.com/notifications/unsubscribe-auth/B7X556UF7NCC5ORY7MLPHHL4RLS6FAVCNFSM6AAAAACWWDJWLCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHM2DAOBUGI4TQNJRGA> > . > You are receiving this because you are subscribed to this thread.Message > ID: ***@***.***> > -- 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]
