Problem
In the Grid Multi-Body architecture, the bodyWrapper natively handles vertical scrolling (overflow-y: scroll). However, this introduced a 15px layout shift where the grid bodies become horizontally misaligned with the headerWrapper, which lacks a vertical scrollbar.
Solution
- Remove
scrollbar-width: none from bodyWrapper to allow the native vertical scrollbar to be visible at the far right edge of the grid.
- Dynamically measure the browser's native scrollbar width.
- Inject a CSS spacer (e.g.
padding-right) into the headerWrapper whenever the vertical scrollbar is active to restore perfect horizontal alignment between the headers and the cells.
This resolves the missing vertical scrollbar thumb while preserving zero-jitter native vertical compositing.
Task List
- Modify
.neo-grid-body-wrapper CSS.
- Calculate native scrollbar width in JS.
- Update
Header.mjs or Container.mjs to inject the compensation spacer.
Problem
In the Grid Multi-Body architecture, the
bodyWrappernatively handles vertical scrolling (overflow-y: scroll). However, this introduced a 15px layout shift where the grid bodies become horizontally misaligned with theheaderWrapper, which lacks a vertical scrollbar.Solution
scrollbar-width: nonefrombodyWrapperto allow the native vertical scrollbar to be visible at the far right edge of the grid.padding-right) into theheaderWrapperwhenever the vertical scrollbar is active to restore perfect horizontal alignment between the headers and the cells.This resolves the missing vertical scrollbar thumb while preserving zero-jitter native vertical compositing.
Task List
.neo-grid-body-wrapperCSS.Header.mjsorContainer.mjsto inject the compensation spacer.