fix(mobile): positioning of the classic toolbar

TriliumNext · Jan 5, 2025 · 955542a · 955542a
1 parent c1280be
commit 955542a
Showing 1 changed file with 9 additions and 9 deletions.
diff --git a/src/public/app/widgets/ribbon_widgets/classic_editor_toolbar.js b/src/public/app/widgets/ribbon_widgets/classic_editor_toolbar.js
@@ -33,10 +33,10 @@ const TPL = `\
         left: 0;
         bottom: 0;
         right: 0;
-        height: 50vh;
+        height: 10vh;
         overflow-x: auto;
-        background: transparent;
         z-index: 500;
+        user-select: none;
     }
 
     body.mobile .classic-toolbar-widget .ck.ck-toolbar {
@@ -69,16 +69,16 @@ export default class ClassicEditorToolbar extends NoteContextAwareWidget {
         this.contentSized();
 
         if (utils.isMobile()) {
-            let originalHeight = window.visualViewport.height;
-            let originalBottom = this.$widget[0].style.bottom;
-            window.visualViewport.addEventListener("resize", () => {
-                const keyboardSize = originalHeight - window.visualViewport.height;
-                const bottom = Math.max(keyboardSize, originalBottom);
-                this.$widget.css("bottom", `${bottom}px`);
-            });
+            window.visualViewport.addEventListener("resize", () => this.#adjustPosition());
+            window.addEventListener("scroll", () => this.#adjustPosition());
         }
     }
 
+    #adjustPosition() {
+        const bottom = window.innerHeight - window.visualViewport.height;
+        this.$widget.css("bottom", `${bottom}px`);
+    }
+
     async getTitle() {
         return {
             show: await this.#shouldDisplay(),