fix(plugin-chart-table): remove column misalignment when no scrollbars are present#36891
fix(plugin-chart-table): remove column misalignment when no scrollbars are present#36891
Conversation
Code Review Agent Run #1361dfActionable 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 is reviewing your PR. Thanks for using CodeAnt! 🎉We're free for open-source projects. if you're enjoying it, help us grow by sharing. Share on X · |
codeant-ai-for-open-source
bot
added
the
size:XS
Nitpicks 🔍
|
![codeant-ai-for-open-source[bot]](https://avatars.githubusercontent.com/u/151810221?s=60&v=4){kind=small}
| height: bodyHeight, | ||
| overflow: 'auto', | ||
| scrollbarGutter: 'stable', | ||
| scrollbarGutter: hasVerticalScroll ? 'stable' : undefined, |
There was a problem hiding this comment.
Suggestion: Inconsistency with sizer: the sizer container always used scrollbarGutter: 'stable' earlier, while the body used a conditional; this can create transient layout differences. Make the body use scrollbarGutter: 'stable' unconditionally to match the sizer and avoid inconsistent measurements. [possible bug]
Severity Level: Critical 🚨
| scrollbarGutter: hasVerticalScroll ? 'stable' : undefined, | |
| scrollbarGutter: 'stable', |
Why it matters? ⭐
Making the body use scrollbarGutter: 'stable' unconditionally matches the sizer's behavior and avoids transient measurement differences.
This change is a targeted fix for inconsistent measurements introduced by the PR and is likely to reduce header/body width shifts in browsers that support the property.
It's a small, verifiable layout improvement and does not introduce the feature-detection complexity of a fallback.
Prompt for AI Agent 🤖
This is a comment left during a code review.
**Path:** superset-frontend/plugins/plugin-chart-table/src/DataTable/hooks/useSticky.tsx
**Line:** 347:347
**Comment:**
*Possible Bug: Inconsistency with sizer: the sizer container always used `scrollbarGutter: 'stable'` earlier, while the body used a conditional; this can create transient layout differences. Make the body use `scrollbarGutter: 'stable'` unconditionally to match the sizer and avoid inconsistent measurements.
Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.
|
CodeAnt AI finished reviewing your PR. |
sadpandajoe
added
the
v6.0
5 participants
User description
SUMMARY
This PR fixes a column misalignment issue in the Table chart when no scrollbars are present. The fix ensures consistent width calculation between header and body containers across all scrollbar scenarios.
Background
The Table chart's sticky header implementation has gone through several iterations to handle scrollbar-related alignment issues:
PR fix(plugin-chart-table): Prevent misalignment of totals and headers when scrollbar is visible #26964 introduced
scrollbarGutter: 'stable'to all containers (header, body, footer, sizer) to fix misalignment on macOS when users have "Always show scrollbars" enabled. This CSS property reserves space for scrollbars even when they're not visible.PR fix: Table chart types headers are offset from the columns in the table #36190 refined this approach by removing
scrollbarGutter: 'stable'from the header/footer and instead dynamically calculatingheaderContainerWidth = maxWidth - scrollBarSizewhen vertical scroll exists. This fixed cases where headers were offset from columns.The Problem
After PR #36190, a new edge case emerged: when no scrollbars are present (table fits entirely within its container), the columns become misaligned. This happens because:
maxWidth(sincehasVerticalScrollis false, no subtraction occurs)maxWidth+scrollbarGutter: 'stable'(always reserves ~8px for scrollbar)The body reserves space for a scrollbar that doesn't exist, making its content area narrower than the header's, causing visible column misalignment.
The Solution
Conditionally apply
scrollbarGutter: 'stable'only whenhasVerticalScrollis true:Fixes #36370 #36185
BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF
before.mp4
after.mp4
TESTING INSTRUCTIONS
ADDITIONAL INFORMATION
CodeAnt-AI Description
Fix column misalignment in Table when no vertical scrollbar
What Changed
Impact
✅ Fewer misaligned table columns✅ Consistent table layout when no scrollbar is visible✅ No unexpected blank gap on the right of tables💡 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.