dosubot[bot] commented on issue #38709: URL: https://github.com/apache/superset/issues/38709#issuecomment-4084298510
<!-- Answer --> 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 should work for tabs. Apply via CSS template or custom CSS injection: ```css .dashboard-component-chart-holder { width: 100%; box-sizing: border-box; } ``` Or globally: ```css *, *::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. <!-- Dosu Comment Footer --> *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).* --- <sup>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)</sup> [](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) [](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/supers et-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/829e 4d92d91ceae4b43b1ed3b063ffe45377799c/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%20tab s%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.) [](https://go.dosu.dev/discord-bot?utm_source=github&utm_medium=bot-comment&utm_campaign=github-assistant&utm_content=join-discord) [](https://twitter.com/intent/tweet?text=%40dosu_ai%20helped%20me%20solve%20this%20issue!&url=https%3A//github.com/apache/superset/issues/38709) -- 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]
