From 076675f3f2dcb7e38baa3ed9293fac984e493f5a Mon Sep 17 00:00:00 2001
From: Vadym Samoilenko <vadymsamoilenko@oliver.agency>
Date: Mon, 23 Mar 2026 17:06:52 +0000
Subject: [PATCH] Fix Handsontable empty grid: always reload sheet from server,
 use ResizeObserver for pixel height

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/pages/SheetPage.tsx | 23 ++++++++++++++++++-----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/frontend/src/pages/SheetPage.tsx b/frontend/src/pages/SheetPage.tsx
index cd393fa..1c09038 100644
--- a/frontend/src/pages/SheetPage.tsx
+++ b/frontend/src/pages/SheetPage.tsx
@@ -17,10 +17,22 @@ const STATUS_OPTIONS = ['Booked', 'To-do', 'In Progress', 'Done']
 
 export default function SheetPage() {
   const { sheetId } = useParams<{ sheetId: string }>()
-  const { sheets, activeSheetId, deliverables, loadSheet, saveSheet, saving } = useSheetStore()
+  const { sheets, deliverables, loadSheet, saveSheet, saving } = useSheetStore()
   const { categories, fetch: fetchCategories } = useDropdownStore()
 
   const hotRef = useRef<any>(null)
+  const roRef = useRef<ResizeObserver | null>(null)
+  const [hotHeight, setHotHeight] = useState(400)
+
+  // Callback ref: fires whenever the container mounts/unmounts
+  const containerRef = useCallback((node: HTMLDivElement | null) => {
+    if (roRef.current) { roRef.current.disconnect(); roRef.current = null }
+    if (!node) return
+    const ro = new ResizeObserver(() => setHotHeight(node.offsetHeight))
+    ro.observe(node)
+    roRef.current = ro
+    setHotHeight(node.offsetHeight)
+  }, [])
   const [aiLoading, setAiLoading] = useState(false)
   const [aiQuestion, setAiQuestion] = useState<string | null>(null)
   const [yolo, setYolo] = useState(false)
@@ -35,7 +47,8 @@ export default function SheetPage() {
   useEffect(() => {
     setSheetError(false)
     fetchCategories()
-    if (sheetId && activeSheetId !== sheetId) {
+    // Always reload from server when sheetId changes
+    if (sheetId) {
       loadSheet(sheetId).catch(() => setSheetError(true))
     }
   }, [sheetId])
@@ -210,8 +223,8 @@ export default function SheetPage() {
       </div>
 
       {/* Spreadsheet */}
-      <div className="flex-1 overflow-hidden rounded min-h-0" style={{ border: '1px solid var(--border)' }}>
-        {deliverables !== undefined && (
+      <div ref={containerRef} className="flex-1 overflow-hidden rounded min-h-0" style={{ border: '1px solid var(--border)' }}>
+        {deliverables !== undefined && hotHeight > 0 && (
           <HotTable
             ref={hotRef}
             data={deliverables as any[]}
@@ -222,7 +235,7 @@ export default function SheetPage() {
             contextMenu={true}
             manualColumnResize={true}
             afterChange={handleAfterChange}
-            height="100%"
+            height={hotHeight}
             width="100%"
             licenseKey="non-commercial-and-evaluation"
             stretchH="last"