diff --git a/app/assets/javascripts/components/NotesOptions.tsx b/app/assets/javascripts/components/NotesOptions.tsx index 5a74079f2c2..11d4bda71ac 100644 --- a/app/assets/javascripts/components/NotesOptions.tsx +++ b/app/assets/javascripts/components/NotesOptions.tsx @@ -16,6 +16,8 @@ type Props = { onSubmenuChange?: (submenuOpen: boolean) => void; }; +const MAX_TAGS_MENU_HEIGHT = 265; + export const NotesOptions = observer( ({ appState, closeOnBlur, setLockCloseOnBlur, onSubmenuChange }: Props) => { const [tagsMenuOpen, setTagsMenuOpen] = useState(false); @@ -84,7 +86,7 @@ export const NotesOptions = observer( setTagsMenuPosition({ top: offsetTop, right: - buttonRect.right + 265 > document.body.clientWidth + buttonRect.right + MAX_TAGS_MENU_HEIGHT > document.body.clientWidth ? offsetWidth : -offsetWidth, }); diff --git a/app/assets/javascripts/ui_models/app_state/notes_state.ts b/app/assets/javascripts/ui_models/app_state/notes_state.ts index 98f3452b4ac..4699e316c79 100644 --- a/app/assets/javascripts/ui_models/app_state/notes_state.ts +++ b/app/assets/javascripts/ui_models/app_state/notes_state.ts @@ -6,7 +6,6 @@ import { SNNote, NoteMutator, ContentType, - SNTag, } from '@standardnotes/snjs'; import { makeObservable, @@ -23,7 +22,7 @@ export class NotesState { lastSelectedNote: SNNote | undefined; selectedNotes: Record = {}; contextMenuOpen = false; - contextMenuPosition: { top: number; left: number } = { top: 0, left: 0 }; + contextMenuPosition: { top?: number; left: number, bottom?: number } = { top: 0, left: 0 }; constructor( private application: WebApplication, @@ -162,7 +161,7 @@ export class NotesState { this.contextMenuOpen = open; } - setContextMenuPosition(position: { top: number; left: number }): void { + setContextMenuPosition(position: { top?: number; left: number, bottom?: number }): void { this.contextMenuPosition = position; } diff --git a/app/assets/javascripts/views/notes/notes_view.ts b/app/assets/javascripts/views/notes/notes_view.ts index df8d7072cbf..1255ae67c75 100644 --- a/app/assets/javascripts/views/notes/notes_view.ts +++ b/app/assets/javascripts/views/notes/notes_view.ts @@ -62,6 +62,7 @@ type NoteFlag = { */ const MIN_NOTE_CELL_HEIGHT = 51.0; const DEFAULT_LIST_NUM_NOTES = 20; +const MAX_CONTEXT_MENU_HEIGHT = 245; const ELEMENT_ID_SEARCH_BAR = 'search-bar'; const ELEMENT_ID_SCROLL_CONTAINER = 'notes-scrollable'; @@ -304,10 +305,18 @@ class NotesViewCtrl extends PureViewCtrl { await this.selectNote(note); } if (this.state.selectedNotes[note.uuid]) { - this.application.getAppState().notes.setContextMenuPosition({ - top: e.clientY, - left: e.clientX, - }); + const clientHeight = document.documentElement.clientHeight; + if (e.clientY > clientHeight - MAX_CONTEXT_MENU_HEIGHT) { + this.application.getAppState().notes.setContextMenuPosition({ + bottom: clientHeight - e.clientY, + left: e.clientX, + }); + } else { + this.application.getAppState().notes.setContextMenuPosition({ + top: e.clientY, + left: e.clientX, + }); + } this.application.getAppState().notes.setContextMenuOpen(true); } }