fix(dashboard): restore spacing for charts inside Tabs layout#38729
fix(dashboard): restore spacing for charts inside Tabs layout#38729Mayankaggarwal8055 wants to merge 2 commits intoapache:masterfrom
Conversation
Code Review Agent Run #4a1d13Actionable Suggestions - 0Review Details
Bito Usage GuideCommands Type the following command in the pull request comment and save the comment.
Refer to the documentation for additional commands. Configuration This repository uses Documentation & Help AI Code Review powered by |
codeant-ai-for-open-source
bot
added
the
size:XS
dosubot
bot
added
the
dashboard:component
Sequence DiagramThis PR updates the chart holder style in DashboardBuilder so padding is included in width calculations. The change prevents overflow in Tabs layouts and keeps consistent spacing between charts. sequenceDiagram
participant User
participant DashboardUI
participant ChartHolderStyle
participant BrowserLayout
User->>DashboardUI: Open dashboard tab
DashboardUI->>ChartHolderStyle: Render chart holder with border box sizing
ChartHolderStyle->>BrowserLayout: Compute width including padding
BrowserLayout-->>DashboardUI: Return non overflowing chart layout
DashboardUI-->>User: Show charts with preserved spacing
Generated by CodeAnt AI |
There was a problem hiding this comment.
Pull request overview
Restores consistent spacing for dashboard charts placed inside a Tabs layout by ensuring chart-holder padding is included in width calculations (avoiding overflow that collapses inter-chart spacing).
Changes:
- Add
box-sizing: border-boxto.dashboard-component-chart-holderstyling sowidth: 100%includes padding.
codeant-ai-for-open-source
bot
added
size:XS
✅ Deploy Preview for superset-docs-preview ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Hi @hainenber @msyavuz @michael-s-molina , I’ve addressed the issue. I verified the behavior in both cases:
I’ve attached before and after screenshots below for reference to highlight the difference. Please let me know if any further changes or improvements are needed. Before: 
after: 
|
Code Review Agent Run #006e9dActionable Suggestions - 0Review Details
Bito Usage GuideCommands Type the following command in the pull request comment and save the comment.
Refer to the documentation for additional commands. Configuration This repository uses Documentation & Help AI Code Review powered by |
User description
Charts inside Tabs layout lose spacing due to
.dashboard-component-chart-holderusing default
content-boxsizing with padding, causing overflow and collapsing spacing between charts.What does this PR do?
Adds
box-sizing: border-boxto.dashboard-component-chart-holderso padding is included within the container width.
Why is this needed?
Without this, chart containers overflow their allocated space, leading to
visual overlap and loss of spacing, especially noticeable inside Tabs layout.
Testing
Related
Closes #38709
CodeAnt-AI Description
Restore chart spacing in tabbed dashboards and keep faded charts outlined
What Changed
Impact
✅ Clearer chart spacing in tabbed dashboards✅ Fewer chart overlap issues in Tabs✅ More consistent chart states while switching dashboards💡 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:
This lets you have a chat with CodeAnt AI about your pull request, making it easier to understand and improve your code.
Example
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:
This helps CodeAnt AI learn and adapt to your team's coding style and standards.
Example
Retrigger review
Ask CodeAnt AI to review the PR again, by typing:
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.