jeffemmett
/
rspace-online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(rnotes): mobile collab UX — bottom-sheet comments, toolbar reorder 

- 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 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-03-25 20:26:30 -07:00
parent 8f9d507440
commit 219a5f434b
1 changed files with 9 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
modules/rnotes/components/folk-notes-app.ts
View File

@ -3222,9 +3222,7 @@ Gear: EUR 400 (10%)</code></pre><p><em>Maya is tracking expenses in rF
border-left: 1px solid var(--rs-border, #e5e7eb); border-left: 1px solid var(--rs-border, #e5e7eb);
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.comment-sidebar.has-comments { width: 240px; } /* Comment sidebar → bottom sheet on all mobile */
}
@media (max-width: 480px) {
.editor-with-comments { flex-direction: column; } .editor-with-comments { flex-direction: column; }
.comment-sidebar.has-comments { .comment-sidebar.has-comments {
width: 100%; border-left: none; width: 100%; border-left: none;
@ -3567,14 +3565,19 @@ Gear: EUR 400 (10%)</code></pre><p><em>Maya is tracking expenses in rF
.editor-wrapper .editable-title { padding: 12px 14px 0; } .editor-wrapper .editable-title { padding: 12px 14px 0; }
.tiptap-container .tiptap { padding: 14px 16px; } .tiptap-container .tiptap { padding: 14px 16px; }
.sidebar-footer-btn { min-height: 36px; padding: 7px 12px; } .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) { @media (max-width: 480px) {
.rapp-nav__btn { padding: 5px 10px; font-size: 12px; } .rapp-nav__btn { padding: 5px 10px; font-size: 12px; }
.editable-title { font-size: 18px; } .editable-title { font-size: 18px; }
.tiptap-container .tiptap { font-size: 14px; padding: 12px 14px; min-height: 200px; } .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; } .code-textarea { min-height: 200px; }
.image-preview { max-height: 240px; } .image-preview { max-height: 240px; }
.note-actions-bar { flex-wrap: wrap; gap: 6px; } .note-actions-bar { flex-wrap: wrap; gap: 6px; }