From ab8b273400abcee1790fecf10c8ff4d4e5cbfee5 Mon Sep 17 00:00:00 2001 From: Romain LE DISEZ Date: Sat, 6 Jun 2026 16:28:31 +0000 Subject: [PATCH] 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 --- src/app.css | 8 +- src/app.html | 2 +- src/lib/components/FormattingToolbar.svelte | 429 ++++++++++---------- src/lib/components/NoteEditor.svelte | 185 +++++++-- 4 files changed, 384 insertions(+), 240 deletions(-) diff --git a/src/app.css b/src/app.css index 3adff4b..1a7903b 100644 --- a/src/app.css +++ b/src/app.css @@ -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); diff --git a/src/app.html b/src/app.html index 5a01b4e..c5ce449 100644 --- a/src/app.html +++ b/src/app.html @@ -2,7 +2,7 @@ - +