From 955542a9916a37af0aca22cc7ffc17d8a0821e6a Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sun, 5 Jan 2025 02:35:41 +0200
Subject: [PATCH] fix(mobile): positioning of the classic toolbar

---
 .../ribbon_widgets/classic_editor_toolbar.js   | 18 +++++++++---------
 1 file changed, 9 insertions(+), 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
index 0c8b96f46..b3391cd56 100644
--- 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(),