You are viewing a plain text version of this content. The canonical link for it is here.

Posted to notifications@superset.apache.org by "EnxDev (via GitHub)" <gi...@apache.org> on 2026/01/03 12:22:37 UTC

[PR] fix(plugin-chart-table): remove column misalignment when no scrollbars are present [superset]

EnxDev opened a new pull request, #36891:
URL: https://github.com/apache/superset/pull/36891

   <!---
   Please write the PR title following the conventions at https://www.conventionalcommits.org/en/v1.0.0/
   Example:
   fix(dashboard): load charts correctly
   -->
   
   ### SUMMARY
   <!--- Describe the change below, including rationale and design decisions -->
   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 #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 #36190** refined this approach by removing `scrollbarGutter: 'stable'` from the header/footer and instead dynamically calculating `headerContainerWidth = maxWidth - scrollBarSize` when 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:
   
   - **Header**: Uses `maxWidth` (since `hasVerticalScroll` is false, no subtraction occurs)
   - **Body**: Uses `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 when `hasVerticalScroll` is true:
   
   ### BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF
   <!--- Skip this if not applicable -->
   - Before: with vertical scrollbar, no horizontal scroll and no vertical scroll
   
   https://github.com/user-attachments/assets/11481e2f-d6a9-42e5-a308-d6352b577483
   
   
   <img width="1712" height="1267" alt="Screenshot 2026-01-03 132059" src="https://github.com/user-attachments/assets/8978fea8-6d5a-4a5b-88a8-6ced2abe798d" />
   <img width="1712" height="1266" alt="Screenshot 2026-01-03 132051" src="https://github.com/user-attachments/assets/de56d46b-d3aa-4028-aeca-3483896c3d88" />
   <img width="1716" height="1265" alt="Screenshot 2026-01-03 132003" src="https://github.com/user-attachments/assets/cff65ec0-95d2-42cc-a0fa-f131ec5c14e5" />
   
   
   - After: with vertical scrollbar, no horizontal scroll and no vertical scroll.
   
   https://github.com/user-attachments/assets/e02d28e8-733b-4b26-a6ab-b693aab4ba1b
   
   <img width="1709" height="1268" alt="Screenshot 2026-01-03 131904" src="https://github.com/user-attachments/assets/ad000104-fdb9-43f7-96b1-87f09f7cce22" />
   <img width="1715" height="1266" alt="Screenshot 2026-01-03 131856" src="https://github.com/user-attachments/assets/a3e45d50-d094-4675-8d42-8012ad4e1671" />
   <img width="1714" height="1266" alt="Screenshot 2026-01-03 131851" src="https://github.com/user-attachments/assets/6d627f4d-37fe-433c-aa50-741404750405" />
   
   ### TESTING INSTRUCTIONS
   <!--- Required! What steps can be taken to manually verify the changes? -->
   
   ### ADDITIONAL INFORMATION
   <!--- Check any relevant boxes with "x" -->
   <!--- HINT: Include "Fixes #nnn" if you are fixing an existing issue -->
   - [ ] Has associated issue:
   - [ ] Required feature flags:
   - [ ] Changes UI
   - [ ] Includes DB Migration (follow approval process in [SIP-59](https://github.com/apache/superset/issues/13351))
     - [ ] Migration is atomic, supports rollback & is backwards-compatible
     - [ ] Confirm DB migration upgrade and downgrade tested
     - [ ] Runtime estimates and downtime expectations provided
   - [ ] Introduces new feature or API
   - [ ] Removes existing feature or API
   


-- 
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: notifications-unsubscribe@superset.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org

Re: [PR] fix(plugin-chart-table): remove column misalignment when no scrollbars are present [superset]

Posted by "codeant-ai-for-open-source[bot] (via GitHub)" <gi...@apache.org>.

codeant-ai-for-open-source[bot] commented on PR #36891:
URL: https://github.com/apache/superset/pull/36891#issuecomment-3707020121

   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](https://twitter.com/intent/tweet?text=Just%20tried%20%40CodeAntAI%20for%20automated%20code%20review%20and%20I%27m%20impressed%21%20Free%20for%20open%20source%20with%20a%20free%20trial%20for%20private%20repos.%20Worth%20checking%20out%3A&url=https%3A//codeant.ai) ·
   [Reddit](https://www.reddit.com/submit?title=Check%20out%20CodeAnt%20for%20automated%20code%20review&text=Just%20tried%20CodeAnt%20for%20automated%20code%20review%20and%20I%27m%20impressed%21%20Free%20for%20open%20source%20with%20a%20free%20trial%20for%20private%20repos.%20Worth%20checking%20out%3A%20https%3A//codeant.ai) ·
   [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcodeant.ai&mini=true&title=Check%20out%20CodeAnt%20for%20automated%20code%20review&summary=Just%20tried%20CodeAnt%20for%20automated%20code%20review%20and%20I%27m%20impressed%21%20Free%20for%20open%20source%20with%20a%20free%20trial%20for%20private%20repos)
   


-- 
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: notifications-unsubscribe@superset.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org

Re: [PR] fix(plugin-chart-table): remove column misalignment when no scrollbars are present [superset]

Posted by "codeant-ai-for-open-source[bot] (via GitHub)" <gi...@apache.org>.

codeant-ai-for-open-source[bot] commented on PR #36891:
URL: https://github.com/apache/superset/pull/36891#issuecomment-3707021781

   ## Nitpicks 🔍
   
   <table>
   <tr><td>🔒&nbsp;<strong>No security issues identified</strong></td></tr>
   <tr><td>⚡&nbsp;<strong>Recommended areas for review</strong><br><br>
   
   - [ ] <a href='https://github.com/apache/superset/pull/36891/files#diff-16f7dcfec1d9c12669feafbf65a364746356d0c742a7bf15ddc74b7b47900bb9R209-R216'><strong>Sizer still forces gutter</strong></a><br>The hidden sizer container still unconditionally sets `scrollbarGutter: 'stable'`. That may reserve scrollbar space during measurement even when `hasVerticalScroll` is false, causing the very misalignment this PR is trying to fix. Verify whether the sizer should also use the same conditional logic.<br>
   
   </td></tr>
   </table>
   


-- 
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: notifications-unsubscribe@superset.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org

Re: [PR] fix(plugin-chart-table): remove column misalignment when no scrollbars are present [superset]

Posted by "codeant-ai-for-open-source[bot] (via GitHub)" <gi...@apache.org>.

codeant-ai-for-open-source[bot] commented on code in PR #36891:
URL: https://github.com/apache/superset/pull/36891#discussion_r2658897275


##########
superset-frontend/plugins/plugin-chart-table/src/DataTable/hooks/useSticky.tsx:
##########
@@ -344,7 +344,7 @@ function StickyWrap({
         style={{
           height: bodyHeight,
           overflow: 'auto',
-          scrollbarGutter: 'stable',
+          scrollbarGutter: hasVerticalScroll ? 'stable' : undefined,

Review 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 🚨
   ```suggestion
             scrollbarGutter: 'stable',
   ```
   <details>
   <summary><b>Why it matters? ⭐ </b></summary>
   
   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.
   </details>
   <details>
   <summary><b>Prompt for AI Agent 🤖 </b></summary>
   
   ```mdx
   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.
   ```
   </details>



-- 
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: notifications-unsubscribe@superset.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org

Re: [PR] fix(plugin-chart-table): remove column misalignment when no scrollbars are present [superset]

Posted by "bito-code-review[bot] (via GitHub)" <gi...@apache.org>.

bito-code-review[bot] commented on PR #36891:
URL: https://github.com/apache/superset/pull/36891#issuecomment-3707019947

   AI Code Review is in progress (usually takes 3 to 15 minutes unless it's a very large PR).


-- 
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: notifications-unsubscribe@superset.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org

Re: [PR] fix(plugin-chart-table): remove column misalignment when no scrollbars are present [superset]

Posted by "EnxDev (via GitHub)" <gi...@apache.org>.

EnxDev merged PR #36891:
URL: https://github.com/apache/superset/pull/36891


-- 
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: notifications-unsubscribe@superset.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org

Re: [PR] fix(plugin-chart-table): remove column misalignment when no scrollbars are present [superset]

Posted by "codeant-ai-for-open-source[bot] (via GitHub)" <gi...@apache.org>.

codeant-ai-for-open-source[bot] commented on PR #36891:
URL: https://github.com/apache/superset/pull/36891#issuecomment-3707021923

   CodeAnt AI finished reviewing your PR.


-- 
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: notifications-unsubscribe@superset.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org