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: [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]
