diff --git a/src/public/app/widgets/note_detail.ts b/src/public/app/widgets/note_detail.ts index 35546de91..afd51a6ae 100644 --- a/src/public/app/widgets/note_detail.ts +++ b/src/public/app/widgets/note_detail.ts @@ -167,6 +167,11 @@ export default class NoteDetailWidget extends NoteContextAwareWidget { } this.checkFullHeight(); + + if (utils.isMobile()) { + const hasFixedTree = this.noteContext?.hoistedNoteId === "_lbMobileRoot"; + $("body").toggleClass("force-fixed-tree", hasFixedTree); + } } /** diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css index d39f70b1d..34bf28ded 100644 --- a/src/public/stylesheets/style.css +++ b/src/public/stylesheets/style.css @@ -1415,6 +1415,29 @@ body.mobile #launcher-pane .dropdown.global-menu > .dropdown-menu.show { } } +@media (max-width: 991px) { + body.mobile.force-fixed-tree #mobile-sidebar-wrapper { + padding-top: 0; + position: static; + height: 40vh; + width: 100vw; + transform: none !important; + background-color: var(--left-pane-background-color) !important; + } + + body.mobile.force-fixed-tree #mobile-sidebar-wrapper .quick-search { + display: none; + } + + body.mobile.force-fixed-tree #mobile-rest-container { + flex-direction: column !important; + } + + body.mobile.force-fixed-tree #detail-container { + flex-grow: 1; + } +} + #launcher-pane { color: var(--launcher-pane-text-color); background-color: var(--launcher-pane-background-color); diff --git a/src/public/stylesheets/theme-next/shell.css b/src/public/stylesheets/theme-next/shell.css index 8811a1d0f..5f8fc3b3d 100644 --- a/src/public/stylesheets/theme-next/shell.css +++ b/src/public/stylesheets/theme-next/shell.css @@ -462,7 +462,7 @@ body.mobile .fancytree-node > span { background-color: rgba(0, 0, 0, 0.5); } - body.mobile #mobile-sidebar-wrapper { + body.mobile:not(.force-fixed-tree) #mobile-sidebar-wrapper { border-top-right-radius: 12px; border-bottom-right-radius: 12px; border-right: 1px solid var(--subtle-border-color);