fix(hot): row rendering on resize, resolve blank whitespace

client/src/app/editor/editor.component.ts

@@ -472,6 +472,7 @@ export class EditorComponent implements OnInit, AfterViewInit, OnDestroy {
 
   private ariaObserver: MutationObserver | undefined
   private ariaCheckInterval: any | undefined
+  private gridResizeObserver: ResizeObserver | undefined
 
   constructor(
     private licenceService: LicenceService,
@@ -2869,6 +2870,12 @@ export class EditorComponent implements OnInit, AfterViewInit, OnDestroy {
       this.ariaCheckInterval = undefined
     }
 
+    // Stop observing the grid container for resizes
+    if (this.gridResizeObserver) {
+      this.gridResizeObserver.disconnect()
+      this.gridResizeObserver = undefined
+    }
+
     // Cancel any pending debounced VA apply
     if (this.vaDebounceTimer) {
       clearTimeout(this.vaDebounceTimer)
@@ -2882,6 +2889,25 @@ export class EditorComponent implements OnInit, AfterViewInit, OnDestroy {
     }
   }
 
+  /**
+   * Re-run height+render when the grid container settles.
+   */
+  private observeGridResize() {
+    const el = this.hotInstance?.rootElement?.parentElement
+    if (!el) return
+
+    this.gridResizeObserver?.disconnect()
+    this.gridResizeObserver = new ResizeObserver(() => {
+      requestAnimationFrame(() => {
+        const hot = this.hotInstance
+        if (!hot || hot.isDestroyed) return
+        hot.updateSettings({ height: this.hotTable.height }, false)
+        hot.render()
+      })
+    })
+    this.gridResizeObserver.observe(el)
+  }
+
   /**
    * Fixes ARIA accessibility issues in the Handsontable component
    * This addresses the accessibility report issues with treegrid and presentation roles
@@ -3177,7 +3203,7 @@ export class EditorComponent implements OnInit, AfterViewInit, OnDestroy {
         manualColumnResize: true,
         filters: false,
         manualRowResize: true,
-        viewportRowRenderingOffset: 50,
+        viewportRowRenderingOffset: 100,
         // show a bar on the left to enable users to select an entire row
         rowHeaders: (index: number) => {
           return ' '
@@ -3466,8 +3492,6 @@ export class EditorComponent implements OnInit, AfterViewInit, OnDestroy {
     )
 
     hot.addHook('afterRender', (isForced: boolean) => {
-      this.eventService.dispatchEvent('resize')
-
       // Fix ARIA accessibility issues after each render
       this.fixAriaAccessibility()
     })
@@ -3598,6 +3622,8 @@ export class EditorComponent implements OnInit, AfterViewInit, OnDestroy {
 
     hot.render()
 
+    this.observeGridResize()
+
     // Fix ARIA accessibility issues after table initialization
     setTimeout(() => {
       this.fixAriaAccessibility()