client/src/app/shared/viewboxes/viewboxes.component.html

@@ -401,7 +401,7 @@
         [columns]="viewboxTables[viewboxTableIndex].hotTable.columns"
         [filters]="true"
         [dropdownMenu]="viewboxTables[viewboxTableIndex].hotTable.dropdownMenu"
-        [height]="viewboxTables[viewboxTableIndex].hotTable.height"
+        [height]="calculateTableHeight(viewbox)"
         stretchH="all"
         [cells]="viewboxTables[viewboxTableIndex].hotTable.cells"
         [maxRows]="viewboxTables[viewboxTableIndex].hotTable.maxRows"

client/src/app/shared/viewboxes/viewboxes.component.ts

@@ -111,7 +111,7 @@ export class ViewboxesComponent implements OnInit, AfterViewInit, OnDestroy {
     },
     columns: [],
     cols: [],
-    height: '100%',
+    height: 200, //WORKAROUND: Changed from '100%' to fixed pixel value because otherwize hot does not load
     settings: {},
     hiddenColumns: true,
     manualColumnMove: false,
@@ -513,6 +513,11 @@ export class ViewboxesComponent implements OnInit, AfterViewInit, OnDestroy {
     this.helperService.debounceCall(1000, () => {
       this.viewboxChanged()
       this.eventService.dispatchEvent('resize')
+
+      // Refresh all viewbox tables after resize
+      this.viewboxes.forEach((viewbox) => {
+        this.refreshTableAfterResize(viewbox)
+      })
     })
 
     return {
@@ -672,6 +677,11 @@ export class ViewboxesComponent implements OnInit, AfterViewInit, OnDestroy {
 
     setTimeout(() => {
       this.setAllHandleTransform()
+
+      // Refresh all tables after snap to grid
+      this.viewboxes.forEach((viewbox) => {
+        this.refreshTableAfterResize(viewbox)
+      })
     })
   }
 
@@ -713,6 +723,11 @@ export class ViewboxesComponent implements OnInit, AfterViewInit, OnDestroy {
     viewbox.minimized = false
 
     this.viewboxChanged()
+
+    // Refresh table after restoring
+    setTimeout(() => {
+      this.refreshTableAfterResize(viewbox)
+    }, 100)
   }
 
   collapse(viewbox: Viewbox) {
@@ -723,6 +738,11 @@ export class ViewboxesComponent implements OnInit, AfterViewInit, OnDestroy {
   expand(viewbox: Viewbox) {
     viewbox.collapsed = false
     this.viewboxChanged()
+
+    // Refresh table after expanding
+    setTimeout(() => {
+      this.refreshTableAfterResize(viewbox)
+    }, 100)
   }
 
   /**
@@ -1158,6 +1178,35 @@ export class ViewboxesComponent implements OnInit, AfterViewInit, OnDestroy {
     }
   }
 
+  /**
+   * WORKAROUND: This is a workaround to calculate the height of the table since `100%`
+   * makes hot not load
+   * Calculate available height for Handsontable
+   * @param viewbox The viewbox to calculate height for
+   * @returns Available height in pixels
+   */
+  calculateTableHeight(viewbox: Viewbox): number {
+    // Calculate the exact height of the content div
+    const dragHandleHeight = 20
+    const searchFormHeight = 38
+    // Return the exact remaining height for the table
+    return viewbox.height - dragHandleHeight - searchFormHeight
+  }
+
+  /**
+   * Refresh Handsontable instance after resize
+   * @param viewbox The viewbox to refresh
+   */
+  refreshTableAfterResize(viewbox: Viewbox): void {
+    const hotInstance = this.getViewboxHotInstance(viewbox.id)
+    if (hotInstance) {
+      // Force the table to recalculate its dimensions
+      setTimeout(() => {
+        hotInstance.refreshDimensions()
+      }, 100)
+    }
+  }
+
   /**
    *
    * @param viewboxId