form view min max cell width

packages/web/src/datagrid/DataGridCell.svelte

@@ -46,6 +46,8 @@
   export let rowData;
   export let colIndex = undefined;
   export let allowHintField = false;
+  export let maxWidth = null;
+  export let minWidth = null;
 
   export let isSelected = false;
   export let isFrameSelected = false;
@@ -64,6 +66,20 @@
   export let onDictionaryLookup = null;
 
   $: value = col.isStructured ? _.get(rowData || {}, col.uniquePath) : (rowData || {})[col.uniqueName];
+
+  function computeStyle(maxWidth, col) {
+    let res = '';
+
+    if (col.width != null) {
+      res += `width:${col.width}px; min-width:${col.width}px; max-width:${col.width}px;`;
+    } else {
+      if (maxWidth != null) res += `max-width:${maxWidth}px;`;
+      if (minWidth != null) res += `min-width:${minWidth}px;`;
+    }
+    return res;
+  }
+
+  $: style = computeStyle(maxWidth, col);
 </script>
 
 <td
@@ -78,7 +94,7 @@
   class:isDeleted
   class:isAutofillSelected
   class:isFocusedColumn
-  style={`width:${col.width}px; min-width:${col.width}px; max-width:${col.width}px`}
+  {style}
 >
   {#if hideContent}
     <slot />

packages/web/src/formview/FormView.svelte

@@ -197,6 +197,7 @@
   export let onNavigate;
 
   let wrapperHeight = 1;
+  let wrapperWidth = 1;
   $: rowHeight = $dataGridRowHeight;
   let currentCell = [0, 0];
 
@@ -491,7 +492,7 @@
 </script>
 
 <div class="outer">
-  <div class="wrapper" use:contextMenu={menu} bind:clientHeight={wrapperHeight}>
+  <div class="wrapper" use:contextMenu={menu} bind:clientHeight={wrapperHeight} bind:clientWidth={wrapperWidth}>
     {#each columnChunks as chunk, chunkIndex}
       <table on:mousedown={handleTableMouseDown}>
         {#each chunk as col, rowIndex}
@@ -525,6 +526,8 @@
               </div>
             </td>
             <DataGridCell
+              maxWidth={(wrapperWidth * 2) / 3}
+              minWidth={200}
               {rowIndex}
               {col}
               {rowData}