fix: Grid Multi-Body Stabilization (Header Sync & Pinning) (#9615)

Author: tobiu

resources/scss/src/grid/Body.scss

@@ -13,7 +13,7 @@
 
 .neo-grid-body {
     height    : 100%;
-    overflow-x: visible;
+    overflow-x: hidden;
 
     .neo-grid-cell {
         &.neo-is-modified {
@@ -39,6 +39,10 @@
         pointer-events: none !important;
     }
 
+    .neo-grid-body-content {
+        position: relative;
+    }
+
     .neo-center {
         justify-content: center;
     }

resources/scss/src/grid/HorizontalScrollbar.scss

@@ -1,6 +1,9 @@
 .neo-grid-horizontal-scrollbar {
-    overflow-x: auto;
-    overflow-y: hidden;
+    flex        : none; // Ensure it's not collapsed by flex-direction column on container
+    min-height  : 17px;
+    overflow-x  : auto;
+    overflow-y  : hidden;
+    position    : relative;
 
     .neo-grid-horizontal-scrollbar-content {
         height: 1px;

src/grid/ScrollManager.mjs

@@ -233,7 +233,7 @@ class ScrollManager extends Base {
 
         if (active) {
             addon.register({
-                bodyId       : me.gridBody.id,
+                bodyIds      : [me.gridContainer.bodyStart?.id, me.gridContainer.body?.id, me.gridContainer.bodyEnd?.id].filter(Boolean),
                 bodyWrapperId: me.gridContainer.bodyWrapper?.id,
                 id           : me.id,
                 windowId
@@ -254,14 +254,14 @@ class ScrollManager extends Base {
 
         if (active) {
             let scrollerId    = me.gridContainer.horizontalScrollbar?.id,
-                bodyWrapperId = me.gridContainer.bodyWrapper?.id,
+                bodyId        = me.gridContainer.body?.id,
                 headerId      = me.gridContainer.headerWrapper?.id;
 
-            if (scrollerId && bodyWrapperId && headerId) {
+            if (scrollerId && bodyId && headerId) {
                 addon.register({
                     id        : me.id + '__h_scroll',
                     scrollerId,
-                    bodyId    : bodyWrapperId,
+                    bodyId,
                     headerId,
                     windowId
                 });

src/main/addon/GridHorizontalScrollSync.mjs

@@ -44,7 +44,7 @@ class GridHorizontalScrollSync extends Base {
             scrollLeft   = scrollerNode.scrollLeft;
 
         // Synchronously update both nodes in the identical animation frame
-        if (bodyNode)   { bodyNode.scrollLeft = scrollLeft; }
+        if (bodyNode)   { bodyNode.style.setProperty('--grid-scroll-left', scrollLeft + 'px'); }
         if (headerNode) { headerNode.scrollLeft = scrollLeft; }
     }
 

src/main/addon/GridRowScrollPinning.mjs

@@ -108,7 +108,7 @@ class GridRowScrollPinning extends Base {
         let me    = this,
             state = me.registrations.get(id);
 
-        if (!state || !state.wrapperNode || !state.contentNode) {
+        if (!state || !state.wrapperNode || !state.contentNodes?.length) {
             return
         }
 
@@ -119,9 +119,13 @@ class GridRowScrollPinning extends Base {
         // We explicitly ignore Wheel, Trackpad, Keyboard, and Body Drag scrolling,
         // allowing their native/custom physics to operate perfectly.
         if (state.isThumbDragging) {
-            state.contentNode.style.setProperty('--grid-row-pin-offset', `${deltaY}px`);
-        } else if (state.contentNode.style.getPropertyValue('--grid-row-pin-offset') !== '0px') {
-            state.contentNode.style.setProperty('--grid-row-pin-offset', '0px');
+            state.contentNodes.forEach(node => {
+                node.style.setProperty('--grid-row-pin-offset', `${deltaY}px`);
+            });
+        } else if (state.contentNodes[0].style.getPropertyValue('--grid-row-pin-offset') !== '0px') {
+            state.contentNodes.forEach(node => {
+                node.style.setProperty('--grid-row-pin-offset', '0px');
+            });
         }
     }
 
@@ -139,7 +143,13 @@ class GridRowScrollPinning extends Base {
         }
 
         me.registrations.forEach(state => {
-            let bodyMeta = meta[state.bodyId];
+            let bodyMeta;
+
+            state.bodyIds.forEach(bodyId => {
+                if (meta[bodyId]) {
+                    bodyMeta = meta[bodyId];
+                }
+            });
 
             if (bodyMeta) {
                 // Silently update the baseline state.
@@ -235,21 +245,21 @@ class GridRowScrollPinning extends Base {
     /**
      * Registers a grid for row scroll pinning and attaches native scroll listener.
      * @param {Object} data
-     * @param {String} data.bodyId        The ID of the grid body
+     * @param {String[]} data.bodyIds       The IDs of the grid body nodes
      * @param {String} data.bodyWrapperId The ID of the vertical scroll wrapper
      * @param {String} data.id            Unique identifier for the registration (e.g. ScrollManager id)
      */
-    register({bodyId, bodyWrapperId, id}) {
+    register({bodyIds, bodyWrapperId, id}) {
         let me            = this,
             wrapperNode   = DomAccess.getElement(bodyWrapperId),
-            contentNode   = DomAccess.getElement(bodyId);
+            contentNodes  = bodyIds.map(bodyId => DomAccess.getElement(bodyId)).filter(Boolean);
 
-        if (wrapperNode && contentNode) {
+        if (wrapperNode && contentNodes.length > 0) {
             me.registrations.set(id, {
                 id,
-                bodyId,
+                bodyIds,
                 wrapperNode,
-                contentNode,
+                contentNodes,
                 isThumbDragging: false,
                 scrollTimeoutId: null,
                 workerScrollTop: 0