sadpandajoe opened a new pull request, #42573:
URL: https://github.com/apache/superset/pull/42573
### SUMMARY
In the Table chart, the sticky column-header divider lines can be
horizontally offset from the table body's column dividers (worst at the
right-most column), making the grid look misaligned whenever the body has a
vertical scrollbar.
**Root cause:** the sticky header and the scrollable body are rendered as
two separate `<table>` elements. To keep their columns aligned, `useSticky`
shrinks the header container by `getScrollBarSize()` when the body scrolls
vertically. The body's scrollable area uses a **custom** thin scrollbar
(`::-webkit-scrollbar { width: 8px }`), but `getScrollBarSize()` measured a
hidden probe element with **no** custom scrollbar styling — so on Chrome/Edge
it returned the native scrollbar width (~15px) instead of the 8px that actually
renders. The header was therefore shrunk by ~15px while the body's real
scrollbar only consumes 8px, throwing every column divider ~7px out of
alignment.
### CHANGE
- Introduce a shared `CUSTOM_SCROLLBAR_SIZE` constant (exported from
`getScrollBarSize.ts`) and use it for the body's `::-webkit-scrollbar`
width/height in `useSticky.tsx`, so the header-shrink amount and the body's
rendered scrollbar can't drift apart.
- In `getScrollBarSize()`, apply the same `::-webkit-scrollbar` rule to the
hidden measurement probe (via a scoped `<style>`, since pseudo-elements can't
be set inline) so the measured width matches what actually renders.
### TESTING INSTRUCTIONS
- Create a Table chart tall enough to show a vertical scrollbar in
Chrome/Edge; confirm the header column dividers line up with the body column
dividers across scroll states (previously ~7px off at the right-most column).
- Unit tests added in `getScrollBarSize.test.ts` verify the probe is
measured with the shared custom scrollbar size and that the constant stays in
sync with the rendered style.
### ADDITIONAL INFORMATION
- [ ] Has associated issue:
- [ ] Required feature flags:
- [x] 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]
