diff --git a/ts/editor/HandleControl.svelte b/ts/editor/HandleControl.svelte
index ef713a866..3b44375a4 100644
--- a/ts/editor/HandleControl.svelte
+++ b/ts/editor/HandleControl.svelte
@@ -6,7 +6,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { createEventDispatcher, getContext } from "svelte";
     import { nightModeKey } from "components/context-keys";
 
-    export let active: boolean;
+    export let offsetX = 0;
+    export let offsetY = 0;
+
+    export let active = false;
+    export let activeSize = 5;
 
     const dispatch = createEventDispatcher();
     const nightMode = getContext(nightModeKey);
@@ -19,48 +23,57 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <div
-    class:nightMode
-    class:active
-    class="nw"
-    on:mousedown|preventDefault
-    on:pointerdown={onPointerdown(true, true)}
-    on:pointerup
-    on:pointermove
-/>
-<div
-    class:nightMode
-    class:active
-    class="ne"
-    on:mousedown|preventDefault
-    on:pointerdown={onPointerdown(true, false)}
-    on:pointerup
-    on:pointermove
-/>
-<div
-    class:nightMode
-    class:active
-    class="sw"
-    on:mousedown|preventDefault
-    on:pointerdown={onPointerdown(false, true)}
-    on:pointerup
-    on:pointermove
-/>
-<div
-    class:nightMode
-    class:active
-    class="se"
-    on:mousedown|preventDefault
-    on:pointerdown={onPointerdown(false, false)}
-    on:pointerup
-    on:pointermove
-/>
+    class="d-contents"
+    style="--offsetX: {offsetX}px; --offsetY: {offsetY}px; --activeSize: {activeSize}px;"
+>
+    <div
+        class:nightMode
+        class:active
+        class="nw"
+        on:mousedown|preventDefault
+        on:pointerdown={onPointerdown(true, true)}
+        on:pointerup
+        on:pointermove
+    />
+    <div
+        class:nightMode
+        class:active
+        class="ne"
+        on:mousedown|preventDefault
+        on:pointerdown={onPointerdown(true, false)}
+        on:pointerup
+        on:pointermove
+    />
+    <div
+        class:nightMode
+        class:active
+        class="sw"
+        on:mousedown|preventDefault
+        on:pointerdown={onPointerdown(false, true)}
+        on:pointerup
+        on:pointermove
+    />
+    <div
+        class:nightMode
+        class:active
+        class="se"
+        on:mousedown|preventDefault
+        on:pointerdown={onPointerdown(false, false)}
+        on:pointerup
+        on:pointermove
+    />
+</div>
 
 <style lang="scss">
-    div {
+    .d-contents {
+        display: contents;
+    }
+
+    div > div {
         position: absolute;
 
-        width: 7px;
-        height: 7px;
+        width: var(--activeSize);
+        height: var(--activeSize);
         border: 1px solid black;
 
         &.active {
@@ -74,49 +87,49 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 background-color: white;
             }
         }
-    }
 
-    .nw {
-        top: -5px;
-        left: -5px;
-        border-bottom: none;
-        border-right: none;
+        &.nw {
+            top: calc(0px - var(--offsetY));
+            left: calc(0px - var(--offsetX));
+            border-bottom: none;
+            border-right: none;
 
-        &.active {
-            cursor: nw-resize;
+            &.active {
+                cursor: nw-resize;
+            }
         }
-    }
 
-    .ne {
-        top: -5px;
-        right: -5px;
-        border-bottom: none;
-        border-left: none;
+        &.ne {
+            top: calc(0px - var(--offsetY));
+            right: calc(0px - var(--offsetX));
+            border-bottom: none;
+            border-left: none;
 
-        &.active {
-            cursor: ne-resize;
+            &.active {
+                cursor: ne-resize;
+            }
         }
-    }
 
-    .sw {
-        bottom: -5px;
-        left: -5px;
-        border-top: none;
-        border-right: none;
+        &.sw {
+            bottom: calc(0px - var(--offsetY));
+            left: calc(0px - var(--offsetX));
+            border-top: none;
+            border-right: none;
 
-        &.active {
-            cursor: sw-resize;
+            &.active {
+                cursor: sw-resize;
+            }
         }
-    }
 
-    .se {
-        bottom: -5px;
-        right: -5px;
-        border-top: none;
-        border-left: none;
+        &.se {
+            bottom: calc(0px - var(--offsetY));
+            right: calc(0px - var(--offsetX));
+            border-top: none;
+            border-left: none;
 
-        &.active {
-            cursor: se-resize;
+            &.active {
+                cursor: se-resize;
+            }
         }
     }
 </style>
diff --git a/ts/editor/HandleSelection.svelte b/ts/editor/HandleSelection.svelte
index 52fd5dfc7..c9a9724d9 100644
--- a/ts/editor/HandleSelection.svelte
+++ b/ts/editor/HandleSelection.svelte
@@ -6,6 +6,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export let container: HTMLElement;
     export let activeImage: HTMLImageElement | null;
 
+    export let offsetX = 0;
+    export let offsetY = 0;
+
     $: if (activeImage) {
         updateSelection();
     } else {
@@ -41,7 +44,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <div
-    style="--left: {left}px; --top: {top}px; --width: {width}px; --height: {height}px;"
+    style="--left: {left}px; --top: {top}px; --width: {width}px; --height: {height}px; --offsetX: {offsetX}px; --offsetY: {offsetY}px;"
 >
     <slot />
 </div>
@@ -50,9 +53,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     div {
         position: absolute;
 
-        left: var(--left, 0);
-        top: var(--top, 0);
-        width: var(--width);
-        height: var(--height);
+        left: calc(var(--left, 0px) - var(--offsetX, 0px));
+        top: calc(var(--top, 0px) - var(--offsetY, 0px));
+        width: calc(var(--width) + 2 * var(--offsetX, 0px));
+        height: calc(var(--height) + 2 * var(--offsetY, 0px));
     }
 </style>
diff --git a/ts/editor/ImageHandle.svelte b/ts/editor/ImageHandle.svelte
index 1933dd4bc..8685bee4d 100644
--- a/ts/editor/ImageHandle.svelte
+++ b/ts/editor/ImageHandle.svelte
@@ -179,6 +179,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
         <HandleControl
             {active}
+            activeSize={7}
+            offsetX={5}
+            offsetY={5}
             on:pointerclick={setPointerCapture}
             on:pointerup={startObserving}
             on:pointermove={resize}