feat(ui): improve mobile editor layout

Make editor full-screen natively on mobile with back button. Add
visualViewport tracking to keep bottom toolbars above the software keyboard.

disable pull-to-refresh for native PWA feel
prevent auto-zoom on input focus in mobile Safari
prevent background scrolling when editor is open
prevent touch scroll on editor toolbars to stop background scrolling
hide visual gap at bottom of editor when iOS keyboard opens
move note actions to top-right menu on mobile devices
wrap background colors in mobile menu to reduce width
make formatting toolbar scrollable on mobile and extract dropdowns
remove empty else block causing svelte compilation error
add missing data-dropdown attributes to fix click interception in toolbar portals
keep mobile keyboard open when using toolbar menus and prevent right-edge overflow

Co-authored-by: Google Gemini <gemini@google.com>
This commit is contained in:
Romain LE DISEZ
2026-07-10 16:19:19 +02:00
co-authored by Google Gemini
parent 57cbab3cec
commit ab8b273400
4 changed files with 384 additions and 240 deletions
+7 -1
View File
@@ -41,9 +41,10 @@
--grid-dot: #e8dcc8;
}
body {
html, body {
font-family: 'JetBrains Mono', monospace;
accent-color: var(--primary);
overscroll-behavior-y: none;
}
body::before {
@@ -68,6 +69,11 @@ body::before {
to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes slide-up {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
/* Prose overrides for parchment theme */
.prose {
--tw-prose-body: var(--text);