[FIX] #1626 add min-width using css grid minmax()

Author: iamfaran

client/packages/lowcoder/src/comps/comps/columnLayout/columnLayout.tsx

@@ -123,6 +123,53 @@ const ColumnContainer = (props: ColumnContainerProps) => {
   );
 };
 
+// Function to apply min-widths to grid template columns
+const applyMinWidthsToGridColumns = (columnsDef: string, minWidths: (string | null)[] = []) => {
+  // Handle empty case
+  if (!columnsDef?.trim()) return '';
+  
+  // Handle repeat() functions with special parsing
+  if (columnsDef.includes('repeat(')) {
+    // For complex repeat patterns, we should return as-is to avoid breaking the layout
+    // A more complex parser would be needed to fully support repeat with minmax
+    return columnsDef;
+  }
+
+  const columns = columnsDef.trim().split(/\s+/);
+
+  const newColumns = columns.map((col, index) => {
+    const minWidth = minWidths[index];
+
+    // Skip if no minWidth provided for this column
+    if (!minWidth) {
+      return col;
+    }
+
+    // Keywords that should never be wrapped in minmax()
+    const keywords = ['auto', 'min-content', 'max-content', 'fit-content', 'subgrid'];
+    if (keywords.some(keyword => col === keyword)) {
+      return col;
+    }
+    
+    // Functions that should never be wrapped in minmax()
+    if (col.includes('(') && col.includes(')')) {
+      // Already includes a function like calc(), minmax(), etc.
+      return col;
+    }
+
+    // Determine if column is flexible and can be wrapped with minmax
+    // - fr units (e.g., "1fr", "2.5fr")
+    // - percentage values (e.g., "50%")
+    // - length values (px, em, rem, etc.)
+    const isFlexible = /fr$/.test(col) || 
+                       /%$/.test(col) ||
+                       /^\d+(\.\d+)?(px|em|rem|vh|vw|vmin|vmax|cm|mm|in|pt|pc)$/.test(col);
+
+    return isFlexible ? `minmax(${minWidth}, ${col})` : col;
+  });
+
+  return newColumns.join(' ');
+};
 
 const ColumnLayout = (props: ColumnLayoutProps) => {
   let {
@@ -139,6 +186,12 @@ const ColumnLayout = (props: ColumnLayoutProps) => {
     mainScrollbar
   } = props;
 
+  // Extract minWidths from columns
+  const minWidths = columns.map(column => column.minWidth || null);
+  
+  // Apply min-widths to grid template columns
+  const gridTemplateColumns = applyMinWidthsToGridColumns(templateColumns, minWidths);
+
   return (
     <BackgroundColorContext.Provider value={props.style.background}>
       <DisabledContext.Provider value={props.disabled}>
@@ -147,7 +200,7 @@ const ColumnLayout = (props: ColumnLayoutProps) => {
           <ContainWrapper $style={{
             ...props.style,
             display: "grid",
-            gridTemplateColumns: templateColumns,
+            gridTemplateColumns: gridTemplateColumns,
             columnGap,
             gridTemplateRows: templateRows,
             rowGap,