LearnNewsExamplesServices
Frontmatter
id9611
titleGrid Multi-Body: Native Vertical Scrollbar & Alignment Spacer
stateOpen
labels
enhancementaigrid
assigneestobiu
createdAtMar 31, 2026, 4:03 PM
updatedAtMar 31, 2026, 4:07 PM
githubUrlhttps://github.com/neomjs/neo/issues/9611
authortobiu
commentsCount0
parentIssue9486
subIssues[]
subIssuesCompleted0
subIssuesTotal0
blockedBy[]
blocking[]

Grid Multi-Body: Native Vertical Scrollbar & Alignment Spacer

Openenhancementaigrid
tobiu
tobiu commented on Mar 31, 2026, 4:03 PM

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

  1. Remove scrollbar-width: none from bodyWrapper to allow the native vertical scrollbar to be visible at the far right edge of the grid.
  2. Dynamically measure the browser's native scrollbar width.
  3. 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.
tobiu added the enhancement label on Mar 31, 2026, 4:03 PM
tobiu added the ai label on Mar 31, 2026, 4:03 PM
tobiu added the grid label on Mar 31, 2026, 4:03 PM
tobiu added parent issue #9486 on Mar 31, 2026, 4:07 PM
tobiu assigned to @tobiu on Mar 31, 2026, 4:07 PM