fix: make context menu scrollable when there's not enough space

app/assets/javascripts/components/NotesContextMenu.tsx

@@ -31,8 +31,8 @@ const NotesContextMenu = observer(({ appState }: Props) => {
   return appState.notes.contextMenuOpen ? (
     <div
       ref={contextMenuRef}
-      className="sn-dropdown max-w-80 flex flex-col py-2"
+      className="sn-dropdown max-w-80 flex flex-col py-2 overflow-y-scroll absolute"
-      style={{ position: 'absolute', ...appState.notes.contextMenuPosition }}
+      style={{ ...appState.notes.contextMenuPosition, maxHeight: appState.notes.contextMenuMaxHeight }}
     >
       <NotesOptions
         appState={appState}

app/assets/javascripts/ui_models/app_state/notes_state.ts

@@ -27,6 +27,7 @@ export class NotesState {
     top: 0,
     left: 0,
   };
+  contextMenuMaxHeight: number | 'auto' = 'auto';
   showProtectedWarning = false;
 
   constructor(
@@ -45,6 +46,7 @@ export class NotesState {
 
       setContextMenuOpen: action,
       setContextMenuPosition: action,
+      setContextMenuMaxHeight: action,
       setShowProtectedWarning: action,
       unselectNotes: action,
     });
@@ -181,6 +183,10 @@ export class NotesState {
     this.contextMenuPosition = position;
   }
 
+  setContextMenuMaxHeight(height: number | 'auto'): void {
+    this.contextMenuMaxHeight = height;
+  }
+
   async changeSelectedNotes(
     mutate: (mutator: NoteMutator) => void
   ): Promise<void> {

app/assets/javascripts/views/notes/notes_view.ts

@@ -313,18 +313,54 @@ class NotesViewCtrl extends PureViewCtrl<unknown, NotesCtrlState> {
         document.documentElement
       ).fontSize;
       const maxContextMenuHeight = parseFloat(defaultFontSize) * 20;
-      if (e.clientY > clientHeight - maxContextMenuHeight) {
+      const footerHeight = 32;
-        this.application.getAppState().notes.setContextMenuPosition({
+
-          bottom: clientHeight - e.clientY,
+      // Open up-bottom is default behavior
-          left: e.clientX,
+      let openUpBottom = true;
-        });
+
+      const bottomSpace = clientHeight - footerHeight - e.clientY;
+      const upSpace = e.clientY;
+
+      // If not enough space to open up-bottom
+      if (maxContextMenuHeight > bottomSpace) {
+        // If there's enough space, open bottom-up
+        if (upSpace > maxContextMenuHeight) {
+          openUpBottom = false;
+          this.appState.notes.setContextMenuMaxHeight(
+            'auto'
+          );
+        // Else, reduce max height (menu will be scrollable) and open in whichever direction there's more space
+        } else {
+          if (upSpace > bottomSpace) {
+            this.appState.notes.setContextMenuMaxHeight(
+              upSpace - 2
+            );
+            openUpBottom = false;
+          } else {
+            this.appState.notes.setContextMenuMaxHeight(
+              bottomSpace - 2
+            );
+          }
+        }
       } else {
-        this.application.getAppState().notes.setContextMenuPosition({
+        this.appState.notes.setContextMenuMaxHeight(
+          'auto'
+        );
+      }
+
+      if (openUpBottom) {
+        this.appState.notes.setContextMenuPosition({
           top: e.clientY,
           left: e.clientX,
         });
+      } else {
+        this.appState.notes.setContextMenuPosition({
+          bottom: clientHeight - e.clientY,
+          left: e.clientX,
+        });
       }
-      this.application.getAppState().notes.setContextMenuOpen(true);
+
+      this.appState.notes.setContextMenuOpen(true);
     }
   }