use resize observer

packages/web/src/commands/stdCommands.ts

@@ -255,7 +255,7 @@ export function registerFileCommands({
       name: 'Kill',
       icon: 'icon close',
       toolbar: true,
-      testEnabled: () => getCurrentEditor() != null && getCurrentEditor()?.canKill(),
+      testEnabled: () => getCurrentEditor()?.canKill && getCurrentEditor().canKill(),
       onClick: () => getCurrentEditor().kill(),
     });
   }

packages/web/src/datagrid/DataGridCore.svelte

@@ -1069,7 +1069,9 @@
             data-col="header"
             bind:clientHeight={rowHeight}
             style={`width:${headerColWidth}px; min-width:${headerColWidth}px; max-width:${headerColWidth}px`}
-          />
+          >
+             
+          </td>
           {#each visibleRealColumns as col (col.uniqueName)}
             <td
               class="header-cell"

packages/web/src/query/AceEditor.svelte

@@ -18,6 +18,7 @@
   import { currentDropDownMenu, currentThemeDefinition } from '../stores';
   import _ from 'lodash';
   import { handleCommandKeyDown } from '../commands/CommandListener.svelte';
+  import resizeObserver from '../utility/resizeObserver';
 
   const EDITOR_ID = `svelte-ace-editor-div:${Math.floor(Math.random() * 10000000000)}`;
   const dispatch = createEventDispatcher<{
@@ -177,7 +178,16 @@
   }
 </script>
 
-<div bind:clientWidth bind:clientHeight class="ace-container">
+<div
+  use:resizeObserver={true}
+  on:resize={e => {
+    // @ts-ignore
+    clientWidth = e.detail.width;
+    // @ts-ignore
+    clientHeight = e.detail.height;
+  }}
+  class="ace-container"
+>
   <div id={EDITOR_ID} style="width:{clientWidth}px;height:{clientHeight}px" />
 </div>