data grid row height meter

packages/web/src/App.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import CommandListener from './commands/CommandListener.svelte';
+  import DataGridRowHeightMeter from './datagrid/DataGridRowHeightMeter.svelte';
 
   import PluginsProvider from './plugins/PluginsProvider.svelte';
   import Screen from './Screen.svelte';
@@ -7,6 +8,7 @@
   import OpenTabsOnStartup from './utility/OpenTabsOnStartup.svelte';
 </script>
 
+<DataGridRowHeightMeter />
 <ErrorHandler />
 <PluginsProvider />
 <CommandListener />

packages/web/src/datagrid/DataGridCore.svelte

@@ -246,6 +246,7 @@
   import openNewTab from '../utility/openNewTab';
   import ErrorInfo from '../elements/ErrorInfo.svelte';
   import resizeObserver from '../utility/resizeObserver';
+  import { dataGridRowHeight } from './DataGridRowHeightMeter.svelte';
 
   export let onLoadNextData = undefined;
   export let grider = undefined;
@@ -279,7 +280,7 @@
 
   let containerHeight = 0;
   let containerWidth = 0;
-  let rowHeight = 0;
+  $: rowHeight = $dataGridRowHeight;
   let firstVisibleRowScrollIndex = 0;
   let firstVisibleColumnScrollIndex = 0;
 
@@ -1069,11 +1070,6 @@
             class="header-cell"
             data-row="header"
             data-col="header"
-            use:resizeObserver={true}
-            on:resize={e => {
-              // @ts-ignore
-              rowHeight = e.detail.height;
-            }}
             style={`width:${headerColWidth}px; min-width:${headerColWidth}px; max-width:${headerColWidth}px`}
           />
           {#each visibleRealColumns as col (col.uniqueName)}

packages/web/src/datagrid/DataGridRowHeightMeter.svelte

@@ -0,0 +1,43 @@
+<script lang="ts" context="module">
+  export const dataGridRowHeight = writable(0);
+</script>
+
+<script lang="ts">
+  import { writable } from 'svelte/store';
+  import InlineButton from '../elements/InlineButton.svelte';
+  import FontIcon from '../icons/FontIcon.svelte';
+  import resizeObserver from '../utility/resizeObserver';
+
+  $: console.log('dataGridRowHeight', $dataGridRowHeight);
+</script>
+
+<div>
+  <table>
+    <tr>
+      <td
+        use:resizeObserver={true}
+        on:resize={e => {
+          // @ts-ignore
+          $dataGridRowHeight = e.detail.height + 1;
+        }}
+      >
+        title
+        <InlineButton square>
+          <FontIcon icon="icon chevron-down" />
+        </InlineButton>
+      </td>
+    </tr>
+  </table>
+</div>
+
+<style>
+  div {
+    position: fixed;
+    left: -1000px;
+    top: -1000px;
+    visibility: hidden;
+  }
+  td {
+    display: flex;
+  }
+</style>

packages/web/src/formview/FormView.svelte

@@ -161,6 +161,7 @@
   import registerCommand from '../commands/registerCommand';
   import DataGridCell from '../datagrid/DataGridCell.svelte';
   import { clearLastFocusedDataGrid } from '../datagrid/DataGridCore.svelte';
+  import { dataGridRowHeight } from '../datagrid/DataGridRowHeightMeter.svelte';
   import InplaceEditor from '../datagrid/InplaceEditor.svelte';
   import { cellFromEvent } from '../datagrid/selection';
   import ColumnLabel from '../elements/ColumnLabel.svelte';
@@ -191,7 +192,7 @@
   export let onNavigate;
 
   let wrapperHeight = 1;
-  let rowHeight = 1;
+  $: rowHeight = $dataGridRowHeight;
   let currentCell = [0, 0];
 
   const instance = get_current_component();
@@ -462,11 +463,6 @@
                 style={rowHeight > 1 ? `height: ${rowHeight}px` : undefined}
                 class:isSelected={currentCell[0] == rowIndex && currentCell[1] == chunkIndex * 2}
                 bind:this={domCells[`${rowIndex},${chunkIndex * 2}`]}
-                use:resizeObserver={chunkIndex == 0 && rowIndex == 0}
-                on:resize={e => {
-                  // @ts-ignore
-                  if (rowHeight == 1) rowHeight = e.detail.height;
-                }}
               >
                 <div class="header-cell-inner">
                   {#if col.foreignKey}