feat(mobile): improve editing toolbar positioning on Android

src/public/app/layouts/mobile_layout.ts

@@ -171,6 +171,7 @@ export default class MobileLayout {
                                     .child(new NoteListWidget())
                                     .child(new FilePropertiesWidget().css("font-size", "smaller"))
                             )
+                            .child(new MobileEditorToolbar())
                     )
                     .child(new ProtectedSessionPasswordDialog())
                     .child(new ConfirmDialog())
@@ -182,7 +183,6 @@ export default class MobileLayout {
                     .child(new TabRowWidget().css("height", "40px"))
                     .child(new FlexContainer("row").class("horizontal").css("height", "53px").child(new LauncherContainer(true)).child(new GlobalMenuWidget(true)).id("launcher-pane"))
             )
-            .child(new MobileEditorToolbar())
             .child(new AboutDialog())
             .child(new HelpDialog())
             .child(new RecentChangesDialog())

src/public/app/widgets/ribbon_widgets/mobile_editor_toolbar.ts

@@ -26,9 +26,6 @@ const TPL = /*html*/`\
     body.mobile .classic-toolbar-widget.visible {
         display: flex;
         align-items: flex-end;
-        position: absolute;
-        left: 0;
-        right: 0;
         overflow-x: auto;
         overscroll-behavior: none;
         z-index: 500;
@@ -39,19 +36,6 @@ const TPL = /*html*/`\
         height: 3px;
     }
 
-    @media (max-width: 991px) {
-        body.mobile .classic-toolbar-widget.visible {
-            bottom: calc(var(--tab-bar-height) + var(--launcher-pane-height) + var(--mobile-bottom-offset));
-        }
-    }
-
-    @media (min-width: 991px) {
-        body.mobile .classic-toolbar-widget.visible {
-            bottom: 0;
-            left: 25%;
-        }
-    }
-
     body.mobile .classic-toolbar-widget.dropdown-active {
         height: 50vh;
     }
@@ -94,10 +78,6 @@ export default class MobileEditorToolbar extends NoteContextAwareWidget {
         this.$widget = $(TPL);
         this.contentSized();
 
-        // The virtual keyboard obscures the editing toolbar so we have to reposition by calculating the height of the keyboard.
-        window.visualViewport?.addEventListener("resize", () => this.#adjustPosition());
-        window.addEventListener("scroll", () => this.#adjustPosition());
-
         // Observe when a dropdown is expanded to apply a style that allows the dropdown to be visible, since we can't have the element both visible and the toolbar scrollable.
         this.observer.disconnect();
         this.observer.observe(this.$widget[0], {
@@ -111,15 +91,6 @@ export default class MobileEditorToolbar extends NoteContextAwareWidget {
         this.$widget[0].classList.toggle("dropdown-active", dropdownActive);
     }
 
-    #adjustPosition() {
-        let bottom = window.innerHeight - (window.visualViewport?.height || 0);
-
-        // When the keyboard is not visible, align it to the launcher bar instead.
-        bottom = Math.max(bottom, document.getElementById("mobile-bottom-bar")?.offsetHeight || 0);
-
-        this.$widget.css("bottom", `${bottom}px`);
-    }
-
     async #shouldDisplay() {
         if (!this.note || this.note.type !== "text") {
             return false;

src/views/mobile.ejs

@@ -5,7 +5,7 @@
     <link rel="shortcut icon" href="favicon.ico">
     <meta name="mobile-web-app-capable" content="yes">
 	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
-	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover" />
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover, interactive-widget=resizes-content" />
     <meta name="theme-color" content="#fff">
     <title>TriliumNext Notes</title>
     <link rel="manifest" crossorigin="use-credentials" href="manifest.webmanifest">