From e748591c1050fe024743df0116c71cf124e295eb Mon Sep 17 00:00:00 2001
From: Jan Prochazka <jan.prochazka@gmail.com>
Date: Thu, 1 Apr 2021 15:59:15 +0200
Subject: [PATCH] use resize observer

---
 packages/web/src/commands/stdCommands.ts      |  2 +-
 packages/web/src/datagrid/DataGridCore.svelte |  4 +++-
 packages/web/src/query/AceEditor.svelte       | 12 +++++++++++-
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/packages/web/src/commands/stdCommands.ts b/packages/web/src/commands/stdCommands.ts
index fa86e9540..fc3eea66a 100644
--- a/packages/web/src/commands/stdCommands.ts
+++ b/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(),
     });
   }
diff --git a/packages/web/src/datagrid/DataGridCore.svelte b/packages/web/src/datagrid/DataGridCore.svelte
index 948189753..df913d536 100644
--- a/packages/web/src/datagrid/DataGridCore.svelte
+++ b/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`}
-          />
+          >
+            &nbsp;
+          </td>
           {#each visibleRealColumns as col (col.uniqueName)}
             <td
               class="header-cell"
diff --git a/packages/web/src/query/AceEditor.svelte b/packages/web/src/query/AceEditor.svelte
index 6f0cc1b91..1274fe046 100644
--- a/packages/web/src/query/AceEditor.svelte
+++ b/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>