diff --git a/src/public/app/services/utils.ts b/src/public/app/services/utils.ts index cad99c956..fa93e47dd 100644 --- a/src/public/app/services/utils.ts +++ b/src/public/app/services/utils.ts @@ -269,6 +269,8 @@ async function openDialog($dialog: JQuery, closeActDialog = true) { // @ts-ignore const keyboardActionsService = (await import("./keyboard_actions.js")).default; keyboardActionsService.updateDisplayedShortcuts($dialog); + + return $dialog; } function isHtmlEmpty(html: string) { diff --git a/src/public/app/widgets/dialogs/jump_to_note.js b/src/public/app/widgets/dialogs/jump_to_note.js index 919541bea..82e7337e0 100644 --- a/src/public/app/widgets/dialogs/jump_to_note.js +++ b/src/public/app/widgets/dialogs/jump_to_note.js @@ -46,7 +46,30 @@ export default class JumpToNoteDialog extends BasicWidget { } async jumpToNoteEvent() { - utils.openDialog(this.$widget); + const dialogPromise = utils.openDialog(this.$widget) + if (utils.isMobile()) { + dialogPromise.then(($dialog) => { + const el = $dialog.find(">.modal-dialog")[0]; + + function reposition() { + const offset = 100; + const modalHeight = window.visualViewport.height - offset; + const safeAreaInsetBottom = window.visualViewport.height - window.innerHeight; + el.style.height = `${modalHeight}px`; + el.style.bottom = `${window.visualViewport.height - modalHeight - safeAreaInsetBottom - offset}px`; + } + + this.$autoComplete.on("focus", () => { + reposition(); + }); + + window.visualViewport.addEventListener("resize", () => { + reposition(); + }); + + reposition(); + }); + } // first open dialog, then refresh since refresh is doing focus which should be visible this.refresh(); diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css index 14bb72f00..2c0dec68e 100644 --- a/src/public/stylesheets/style.css +++ b/src/public/stylesheets/style.css @@ -1267,6 +1267,15 @@ body.mobile #launcher-pane .dropdown-menu.show { body.mobile .options-section table { word-break: break-all; } + + body.mobile .jump-to-note-dialog .modal-content { + overflow-y: auto; + } + + body.mobile .jump-to-note-dialog .modal-dialog .aa-dropdown-menu { + max-height: unset; + overflow: auto; + } } /* Mobile, tablet mode */