From 219a5f434bfe7f34b35a2cbbd3a47190d199ac81 Mon Sep 17 00:00:00 2001 From: Jeff Emmett Date: Wed, 25 Mar 2026 20:26:30 -0700 Subject: [PATCH] =?UTF-8?q?fix(rnotes):=20mobile=20collab=20UX=20=E2=80=94?= =?UTF-8?q?=20bottom-sheet=20comments,=20toolbar=20reorder?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Comment sidebar → full-width bottom sheet at ≤768px (was ≤480px) - Toolbar: collab tools (comment, suggest) reordered first on mobile via CSS order so they're visible without scrolling - Suggestion review bar wraps at mobile widths - Toolbar scroll + larger touch targets promoted to ≤768px breakpoint Co-Authored-By: Claude Opus 4.6 --- modules/rnotes/components/folk-notes-app.ts | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/modules/rnotes/components/folk-notes-app.ts b/modules/rnotes/components/folk-notes-app.ts index f60fc0a..d2a1ec2 100644 --- a/modules/rnotes/components/folk-notes-app.ts +++ b/modules/rnotes/components/folk-notes-app.ts @@ -3222,9 +3222,7 @@ Gear: EUR 400 (10%)

Maya is tracking expenses in rF border-left: 1px solid var(--rs-border, #e5e7eb); } @media (max-width: 768px) { - .comment-sidebar.has-comments { width: 240px; } - } - @media (max-width: 480px) { + /* Comment sidebar → bottom sheet on all mobile */ .editor-with-comments { flex-direction: column; } .comment-sidebar.has-comments { width: 100%; border-left: none; @@ -3567,14 +3565,19 @@ Gear: EUR 400 (10%)

Maya is tracking expenses in rF .editor-wrapper .editable-title { padding: 12px 14px 0; } .tiptap-container .tiptap { padding: 14px 16px; } .sidebar-footer-btn { min-height: 36px; padding: 7px 12px; } + /* Toolbar: scroll horizontally, bigger touch targets */ + .editor-toolbar { padding: 3px 4px; gap: 1px; overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; } + .toolbar-btn { width: 36px; height: 36px; } + .toolbar-sep { display: none; } + /* Collab tools first so comment/suggest are visible without scrolling */ + .collab-tools { order: -1; border-right: 1px solid var(--rs-toolbar-sep, #e5e7eb); padding-right: 6px; margin-right: 2px; } + /* Suggestion review bar: allow wrapping */ + .suggestion-review-bar { flex-wrap: wrap; height: auto; min-height: 32px; padding: 4px 8px; gap: 6px; } } @media (max-width: 480px) { .rapp-nav__btn { padding: 5px 10px; font-size: 12px; } .editable-title { font-size: 18px; } .tiptap-container .tiptap { font-size: 14px; padding: 12px 14px; min-height: 200px; } - .editor-toolbar { padding: 3px 4px; gap: 1px; overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; } - .toolbar-btn { width: 36px; height: 36px; } - .toolbar-sep { display: none; } .code-textarea { min-height: 200px; } .image-preview { max-height: 240px; } .note-actions-bar { flex-wrap: wrap; gap: 6px; }