mirror of
https://github.com/bretzel-app/crumbs.git
synced 2026-10-13 04:06:57 +02:00
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>
This commit is contained in:
co-authored by
Claude Fable 5
parent
5fb0337d03
commit
4b7e346206
+5
-1
@@ -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() {
|
||||
|
||||
Reference in New Issue
Block a user