From 4b7e346206c3f96dd8bed38fd28b68dbbaaca9fe Mon Sep 17 00:00:00 2001
From: Frederic Cabassut <cabassut.frederic@gmail.com>
Date: Fri, 10 Jul 2026 16:06:16 +0200
Subject: [PATCH] fix(editor): keep toolbar and dropdowns above the Android
 keyboard

Add interactive-widget=resizes-content to the viewport meta so the
Android keyboard shrinks the layout viewport through the native inset
path. Chromium's visualViewport.height can under-report the visible
height by the system nav-bar height, which left the editor toolbar
floating above the keyboard; the native resize path is accurate. iOS
ignores the attribute and keeps using the visualViewport tracking in
NoteEditor.

Position toolbar dropdown portals with window.innerHeight instead of
visualViewport.height: CSS bottom on position:fixed and
getBoundingClientRect() both use layout-viewport coordinates, so
mixing in the visual-viewport height pushed dropdowns behind the
keyboard while it was open.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 src/app.html                                | 6 +++++-
 src/lib/components/FormattingToolbar.svelte | 9 ++++-----
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/app.html b/src/app.html
index 5a01b4e..2d88ced 100644
--- a/src/app.html
+++ b/src/app.html
@@ -2,7 +2,11 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <!-- interactive-widget=resizes-content: on Android the keyboard shrinks the layout viewport via
+         the native inset path, so bottom-anchored UI (editor toolbar) lands exactly on the keyboard —
+         Chromium's visualViewport.height can under-report by the nav-bar height. iOS ignores this
+         attribute and relies on the visualViewport tracking in NoteEditor instead. -->
+    <meta name="viewport" content="width=device-width, initial-scale=1, interactive-widget=resizes-content" />
     <meta name="theme-color" content="#f0e6d3" />
     <script>
       (function() {
diff --git a/src/lib/components/FormattingToolbar.svelte b/src/lib/components/FormattingToolbar.svelte
index 18bbd00..74bc39d 100644
--- a/src/lib/components/FormattingToolbar.svelte
+++ b/src/lib/components/FormattingToolbar.svelte
@@ -88,13 +88,12 @@
 		closeDropdowns();
 	}
 
-	function getViewportHeight(): number {
-		return window.visualViewport?.height ?? window.innerHeight;
-	}
-
 	function getDropdownStyle(rect: DOMRect, width: number): string {
 		const left = Math.max(viewportMargin, Math.min(rect.left, window.innerWidth - width - viewportMargin));
-		const bottom = getViewportHeight() - rect.top + dropdownGap;
+		// CSS `bottom` on position:fixed and getBoundingClientRect() both use layout-viewport
+		// coordinates, so the reference height must be innerHeight — visualViewport.height is
+		// smaller while the keyboard is open and would push the dropdown behind the keyboard.
+		const bottom = window.innerHeight - rect.top + dropdownGap;
 		return `bottom: ${bottom}px; left: ${left}px;`;
 	}