From a9cbf20067bd2804028c2e0bee81750f7007e845 Mon Sep 17 00:00:00 2001
From: Fabian Braun <fsbraun@gmx.de>
Date: Wed, 25 Sep 2024 17:00:14 +0200
Subject: [PATCH] Improve toolbar positioning

---
 private/css/cms.tiptap.css | 6 +++++-
 private/js/cms.dialog.js   | 2 +-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/private/css/cms.tiptap.css b/private/css/cms.tiptap.css
index fa85c83..897f62a 100644
--- a/private/css/cms.tiptap.css
+++ b/private/css/cms.tiptap.css
@@ -65,7 +65,11 @@
         font-size: 1rem;
         font-weight: normal;
         visibility: hidden;
-        position: absolute;
+        position: sticky;
+        inset-inline-start: 0;
+        inset-inline-end: auto;
+        width: auto;
+        top: 48px; /* Keep below toolbar */
         pointer-events: all;
         display: flex;
         flex-flow: row wrap;
diff --git a/private/js/cms.dialog.js b/private/js/cms.dialog.js
index c11265f..3d9d4e8 100644
--- a/private/js/cms.dialog.js
+++ b/private/js/cms.dialog.js
@@ -277,7 +277,7 @@ class CmsForm {
             const el_pos = this.el.getBoundingClientRect();
             if (options.x > el_pos.width/2) {
                 this.dialog.classList.add("right");
-                this.dialog.style.right = (el_pos.width - options.x - 35) + 'px';
+                this.dialog.style.right = (options.x - el_pos.width - 5) + 'px';
             } else {
                 this.dialog.style.left = (options.x - el_pos.x - 25) + 'px';
             }