From 18f63ef17e58c6ccf9fe5b7e9013cdc313925f9b Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Fri, 6 Aug 2021 04:44:33 +0200
Subject: [PATCH] Prevent overflow of sizeDimensions or image handle buttons

---
 ts/editor/HandleLabel.svelte | 11 +++++++++--
 ts/editor/fields.scss        |  1 +
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/ts/editor/HandleLabel.svelte b/ts/editor/HandleLabel.svelte
index 66ebdc3ff..9de14e0db 100644
--- a/ts/editor/HandleLabel.svelte
+++ b/ts/editor/HandleLabel.svelte
@@ -10,14 +10,20 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     let dimensions: HTMLDivElement;
     let overflowFix = 0;
 
-    afterUpdate(() => {
+    function updateOverflow(dimensions: HTMLDivElement) {
         const boundingClientRect = dimensions.getBoundingClientRect();
         const overflow = isRtl
             ? window.innerWidth - boundingClientRect.x - boundingClientRect.width
             : boundingClientRect.x;
 
         overflowFix = Math.min(0, overflowFix + overflow, overflow);
-    });
+    }
+
+    function updateOverflowAsync(dimensions: HTMLDivElement) {
+        setTimeout(() => updateOverflow(dimensions));
+    }
+
+    afterUpdate(() => updateOverflow(dimensions));
 
     const dispatch = createEventDispatcher();
 
@@ -29,6 +35,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     class="image-handle-dimensions"
     class:is-rtl={isRtl}
     style="--overflow-fix: {overflowFix}px"
+    use:updateOverflowAsync
 >
     <slot />
 </div>
diff --git a/ts/editor/fields.scss b/ts/editor/fields.scss
index 2d8a9d395..f220b915e 100644
--- a/ts/editor/fields.scss
+++ b/ts/editor/fields.scss
@@ -10,6 +10,7 @@
 
 #fields {
     display: flex;
+    overflow-x: hidden;
     flex-direction: column;
     margin: 5px;
 }