From 46ecfe2802a496d6e0d52241b92d617d45b173b7 Mon Sep 17 00:00:00 2001
From: Vadym Samoilenko <vadymsamoilenko@oliver.agency>
Date: Mon, 23 Mar 2026 17:30:44 +0000
Subject: [PATCH] Fix Media dropdown source, enable auto column width

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

diff --git a/frontend/src/pages/SheetPage.tsx b/frontend/src/pages/SheetPage.tsx
index 8fa7208..1027a04 100644
--- a/frontend/src/pages/SheetPage.tsx
+++ b/frontend/src/pages/SheetPage.tsx
@@ -54,42 +54,31 @@ export default function SheetPage() {
   }, [sheetId])
 
   const columns: Handsontable.ColumnSettings[] = [
-    { data: 'Number', title: '#', width: 70, readOnly: true },
-    { data: 'Title', title: 'Title', width: 200 },
-    {
-      data: 'Status', title: 'Status', width: 110,
-      type: 'dropdown', source: STATUS_OPTIONS,
-    },
-    {
-      data: 'Category', title: 'Category', width: 180,
-      type: 'dropdown', strict: false,
-    },
-    {
-      data: 'Media', title: 'Media', width: 180,
-      type: 'dropdown', strict: false,
-    },
-    { data: 'Sub-media', title: 'Sub-media', width: 120 },
-    { data: 'Format', title: 'Format', width: 100 },
-    { data: 'Supply date', title: 'Supply Date', width: 110, type: 'date', dateFormat: 'YYYY-MM-DD' },
-    { data: 'Live date', title: 'Live Date', width: 110, type: 'date', dateFormat: 'YYYY-MM-DD' },
-    { data: 'Language', title: 'Lang', width: 60 },
+    { data: 'Number', title: '#', width: 65, readOnly: true },
+    { data: 'Title', title: 'Title' },
+    { data: 'Status', title: 'Status', type: 'dropdown', source: STATUS_OPTIONS },
+    { data: 'Category', title: 'Category', type: 'dropdown', strict: false },
+    { data: 'Media', title: 'Media', type: 'dropdown', strict: false },
+    { data: 'Sub-media', title: 'Sub-media' },
+    { data: 'Format', title: 'Format' },
+    { data: 'Supply date', title: 'Supply Date', type: 'date', dateFormat: 'YYYY-MM-DD' },
+    { data: 'Live date', title: 'Live Date', type: 'date', dateFormat: 'YYYY-MM-DD' },
+    { data: 'Language', title: 'Lang', width: 55 },
     { data: 'Country', title: 'Country', width: 70 },
   ]
 
   const cells = useCallback((row: number, col: number): Handsontable.CellMeta => {
     if (col === 3) {
-      // Category — source from admin dropdowns
       return { source: categories.map(c => c.name) }
     }
     if (col === 4) {
-      // Media — filter based on current row's Category
-      const hot = hotRef.current?.hotInstance
-      const category = hot?.getDataAtRowProp(row, 'Category') as string | undefined
+      // Read Category from deliverables directly — hotInstance may not be ready yet
+      const category = deliverables[row]?.Category
       const cat = categories.find(c => c.name === category)
       return { source: cat?.mediaTypes ?? [] }
     }
     return {}
-  }, [categories])
+  }, [categories, deliverables])
 
   const handleAfterChange = useCallback((changes: Handsontable.CellChange[] | null) => {
     if (!changes) return
@@ -239,7 +228,7 @@ export default function SheetPage() {
             stretchH="last"
             themeName="ht-theme-main-dark"
             autoRowSize={false}
-            autoColumnSize={false}
+            autoColumnSize={{ syncLimit: '100%' }}
           />
         )}
       </div>