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;`;
 	}