fix: sizing fix

Author: AlexZorkin

frontend/src/components/BCDataGrid/BCGridEditor.jsx

@@ -76,6 +76,7 @@ export const BCGridEditor = ({
   const [showRequiredIndicator, setShowRequiredIndicator] = useState(false)
   const [containerWidth, setContainerWidth] = useState(null)
   const minWidthRelaxedRef = useRef(false)
+  const [minWidthRelaxed, setMinWidthRelaxed] = useState(false)
 
   useEffect(() => {
     if (!showRequiredIndicator && columnDefs?.length) {
@@ -102,20 +103,30 @@ export const BCGridEditor = ({
     if (!columnDefs) return columnDefs
 
     if (shouldFitColumns) {
-      return addFlexToColumns(columnDefs).columnDefs
+      const flexDefs = addFlexToColumns(columnDefs).columnDefs
+      if (!minWidthRelaxed) {
+        return flexDefs
+      }
+      return flexDefs.map((col) => ({
+        ...col,
+        minWidth: 50
+      }))
     }
 
     return columnDefs.map((col) => {
       const nextCol = { ...col }
       if (nextCol.flex != null) {
         delete nextCol.flex
       }
-      if (nextCol.minWidth && !nextCol.width) {
+      if (!minWidthRelaxed && nextCol.minWidth && !nextCol.width) {
         nextCol.width = nextCol.minWidth
       }
+      if (minWidthRelaxed) {
+        nextCol.minWidth = 50
+      }
       return nextCol
     })
-  }, [columnDefs, shouldFitColumns])
+  }, [columnDefs, shouldFitColumns, minWidthRelaxed])
 
   // Compute defaultMinWidth from columnDefs so autoSizeStrategy uses proper initial widths
   // This prevents the "squished then expand" visual effect on page load
@@ -152,6 +163,7 @@ export const BCGridEditor = ({
         if (minWidthRelaxedRef.current) return
         relaxColumnMinWidths(params.api, params.columnApi, 50)
         minWidthRelaxedRef.current = true
+        setMinWidthRelaxed(true)
       })
 
       props.onGridReady?.(params)
@@ -167,6 +179,7 @@ export const BCGridEditor = ({
       if (minWidthRelaxedRef.current) return
       relaxColumnMinWidths(params.api, params.columnApi, 50)
       minWidthRelaxedRef.current = true
+      setMinWidthRelaxed(true)
 
       props.onFirstDataRendered?.(params)
     },

frontend/src/components/BCDataGrid/BCGridEditorPaginated.jsx

@@ -162,6 +162,7 @@ export const BCGridEditorPaginated = ({
   const syncingFromCustomRef = useRef(false)
   const [scrollContentWidth, setScrollContentWidth] = useState(null)
   const minWidthRelaxedRef = useRef(false)
+  const [minWidthRelaxed, setMinWidthRelaxed] = useState(false)
 
   const hasInitializedFromCache = useRef(false)
   const previousGridKey = useRef(gridKey)
@@ -215,20 +216,30 @@ export const BCGridEditorPaginated = ({
     if (!columnDefs) return columnDefs
 
     if (shouldFitColumns) {
-      return addFlexToColumns(columnDefs).columnDefs
+      const flexDefs = addFlexToColumns(columnDefs).columnDefs
+      if (!minWidthRelaxed) {
+        return flexDefs
+      }
+      return flexDefs.map((col) => ({
+        ...col,
+        minWidth: 50
+      }))
     }
 
     return columnDefs.map((col) => {
       const nextCol = { ...col }
       if (nextCol.flex != null) {
         delete nextCol.flex
       }
-      if (nextCol.minWidth && !nextCol.width) {
+      if (!minWidthRelaxed && nextCol.minWidth && !nextCol.width) {
         nextCol.width = nextCol.minWidth
       }
+      if (minWidthRelaxed) {
+        nextCol.minWidth = 50
+      }
       return nextCol
     })
-  }, [columnDefs, shouldFitColumns])
+  }, [columnDefs, shouldFitColumns, minWidthRelaxed])
 
   // Compute defaultMinWidth from columnDefs so autoSizeStrategy uses proper initial widths
   // This prevents the "squished then expand" visual effect on page load
@@ -257,6 +268,7 @@ export const BCGridEditorPaginated = ({
       if (minWidthRelaxedRef.current) return
       relaxColumnMinWidths(params.api, params.columnApi, 50)
       minWidthRelaxedRef.current = true
+      setMinWidthRelaxed(true)
 
       props.onFirstDataRendered?.(params)
     },
@@ -563,6 +575,7 @@ export const BCGridEditorPaginated = ({
         if (minWidthRelaxedRef.current) return
         relaxColumnMinWidths(params.api, params.columnApi, 50)
         minWidthRelaxedRef.current = true
+        setMinWidthRelaxed(true)
       })
 
       props.onGridReady?.(params)

frontend/src/components/BCDataGrid/BCGridViewer.jsx

@@ -114,6 +114,7 @@ export const BCGridViewer = forwardRef(
     const [showScrollbar, setShowScrollbar] = useState(false)
     const [containerWidth, setContainerWidth] = useState(null)
     const minWidthRelaxedRef = useRef(false)
+    const [minWidthRelaxed, setMinWidthRelaxed] = useState(false)
     const syncingFromGridRef = useRef(false)
     const syncingFromCustomRef = useRef(false)
     const [scrollContentWidth, setScrollContentWidth] = useState(null)
@@ -463,6 +464,7 @@ export const BCGridViewer = forwardRef(
           if (minWidthRelaxedRef.current) return
           relaxColumnMinWidths(params.api, params.columnApi, 50)
           minWidthRelaxedRef.current = true
+          setMinWidthRelaxed(true)
         })
       },
       [
@@ -482,6 +484,7 @@ export const BCGridViewer = forwardRef(
       if (minWidthRelaxedRef.current) return
       relaxColumnMinWidths(params.api, params.columnApi, 50)
       minWidthRelaxedRef.current = true
+      setMinWidthRelaxed(true)
     }, [])
 
     const handleChangePage = (_, newPage) => {
@@ -602,20 +605,30 @@ export const BCGridViewer = forwardRef(
       if (!columnDefs) return columnDefs
 
       if (shouldFitColumns) {
-        return addFlexToColumns(columnDefs).columnDefs
+        const flexDefs = addFlexToColumns(columnDefs).columnDefs
+        if (!minWidthRelaxed) {
+          return flexDefs
+        }
+        return flexDefs.map((col) => ({
+          ...col,
+          minWidth: 50
+        }))
       }
 
       return columnDefs.map((col) => {
         const nextCol = { ...col }
         if (nextCol.flex != null) {
           delete nextCol.flex
         }
-        if (nextCol.minWidth && !nextCol.width) {
+        if (!minWidthRelaxed && nextCol.minWidth && !nextCol.width) {
           nextCol.width = nextCol.minWidth
         }
+        if (minWidthRelaxed) {
+          nextCol.minWidth = 50
+        }
         return nextCol
       })
-    }, [columnDefs, shouldFitColumns])
+    }, [columnDefs, shouldFitColumns, minWidthRelaxed])
 
     // Compute defaultMinWidth from columnDefs so autoSizeStrategy uses proper initial widths
     // This prevents the "squished then expand" visual effect on page load