feat: add viewport-aware positioning to prevent menu overflow

When right-clicking near the bottom of the viewport, the context menu now docks to the bottom edge instead of floating off-screen, ensuring it remains accessible and scrollable.

Author: Myestery

src/components/graph/selectionToolbox/NodeOptions.vue

@@ -21,8 +21,8 @@
             />
             <input
               ref="searchInput"
-              autofocus="false"
               v-model="searchQuery"
+              autofocus="false"
               type="text"
               :placeholder="t('contextMenu.Search')"
               class="w-full rounded-lg border border-smoke-200 bg-interface-panel-surface py-2 pl-9 pr-3 text-sm text-text-primary placeholder-text-secondary focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500 dark-theme:border-zinc-700"
@@ -74,6 +74,7 @@ import type {
   SubMenuOption
 } from '@/composables/graph/useMoreOptionsMenu'
 import { useSubmenuPositioning } from '@/composables/graph/useSubmenuPositioning'
+import { calculateMenuPosition } from '@/composables/graph/useViewportAwareMenuPositioning'
 
 // import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
 
@@ -179,19 +180,31 @@ const repositionPopover = () => {
   const btn = targetElement.value
   const overlayEl = resolveOverlayEl()
   if (!btn || !overlayEl) return
+
   const rect = btn.getBoundingClientRect()
-  const marginY = 8 // tailwind mt-2 ~ 0.5rem = 8px
-  const left = isTriggeredByToolbox.value
-    ? rect.left + rect.width / 2
-    : rect.right - rect.width / 4
-  const top = isTriggeredByToolbox.value
-    ? rect.bottom + marginY
-    : rect.top - marginY - 6
+
   try {
-    overlayEl.style.position = 'fixed'
-    overlayEl.style.left = `${left}px`
-    overlayEl.style.top = `${top}px`
-    overlayEl.style.transform = 'translate(-50%, 0)'
+    // Calculate viewport-aware position
+    const style = calculateMenuPosition({
+      triggerRect: rect,
+      menuElement: overlayEl,
+      isTriggeredByToolbox: isTriggeredByToolbox.value,
+      marginY: 8
+    })
+
+    // Apply positioning styles
+    overlayEl.style.position = style.position
+    overlayEl.style.left = style.left
+    overlayEl.style.transform = style.transform
+
+    // Handle top vs bottom positioning
+    if (style.top !== undefined) {
+      overlayEl.style.top = style.top
+      overlayEl.style.bottom = '' // Clear bottom if using top
+    } else if (style.bottom !== undefined) {
+      overlayEl.style.bottom = style.bottom
+      overlayEl.style.top = '' // Clear top if using bottom
+    }
   } catch (e) {
     console.warn('[NodeOptions] Failed to set overlay style', e)
     return

src/components/graph/selectionToolbox/SubmenuPopover.vue

@@ -52,7 +52,7 @@
 
 <script setup lang="ts">
 import Popover from 'primevue/popover'
-import { computed, ref } from 'vue'
+import { computed, nextTick, ref } from 'vue'
 
 import type {
   MenuOption,
@@ -76,14 +76,41 @@ const { getCurrentShape } = useNodeCustomization()
 
 const popover = ref<InstanceType<typeof Popover>>()
 
-const show = (event: Event, target?: HTMLElement) => {
+const show = async (event: Event, target?: HTMLElement) => {
   popover.value?.show(event, target)
+
+  // Wait for next tick to ensure the popover is rendered
+  await nextTick()
+
+  // Apply viewport-aware positioning after popover is shown
+  repositionSubmenu()
 }
 
 const hide = () => {
   popover.value?.hide()
 }
 
+const repositionSubmenu = () => {
+  const overlayEl = (popover.value as any)?.$el as HTMLElement
+  if (!overlayEl) return
+
+  // Get current position and dimensions
+  const rect = overlayEl.getBoundingClientRect()
+  const menuHeight = overlayEl.offsetHeight || overlayEl.scrollHeight
+  const viewportHeight = window.innerHeight
+
+  // Check if menu would overflow viewport bottom
+  const menuBottom = rect.top + menuHeight
+  const wouldOverflow = menuBottom > viewportHeight
+
+  if (wouldOverflow) {
+    // Dock to bottom of viewport while keeping horizontal position
+    overlayEl.style.position = 'fixed'
+    overlayEl.style.bottom = '0px'
+    overlayEl.style.top = ''
+  }
+}
+
 defineExpose({
   show,
   hide

src/composables/graph/useViewportAwareMenuPositioning.ts

@@ -0,0 +1,75 @@
+export interface MenuPositionStyle {
+  position: 'fixed'
+  left: string
+  top?: string
+  bottom?: string
+  transform: string
+}
+
+export interface MenuPositionOptions {
+  /** The trigger element that opened the menu */
+  triggerRect: DOMRect
+  /** The menu overlay element */
+  menuElement: HTMLElement
+  /** Whether the menu was triggered by the toolbox button */
+  isTriggeredByToolbox: boolean
+  /** Margin from trigger element */
+  marginY?: number
+}
+
+/**
+ * Calculates viewport-aware menu positioning that prevents overflow.
+ * When a menu would overflow the bottom of the viewport, it docks to the bottom instead.
+ *
+ * @returns Positioning style properties to apply to the menu element
+ */
+export function calculateMenuPosition(
+  options: MenuPositionOptions
+): MenuPositionStyle {
+  const {
+    triggerRect,
+    menuElement,
+    isTriggeredByToolbox,
+    marginY = 8
+  } = options
+
+  // Calculate horizontal position (same as before)
+  const left = isTriggeredByToolbox
+    ? triggerRect.left + triggerRect.width / 2
+    : triggerRect.right - triggerRect.width / 4
+
+  // Calculate initial top position
+  const initialTop = isTriggeredByToolbox
+    ? triggerRect.bottom + marginY
+    : triggerRect.top - marginY - 6
+
+  // Get menu dimensions
+  const menuHeight = menuElement.offsetHeight || menuElement.scrollHeight
+  const viewportHeight = window.innerHeight
+
+  // Calculate available space below the trigger point
+  const spaceBelow = viewportHeight - initialTop
+
+  // Check if menu would overflow viewport bottom
+  const wouldOverflow = menuHeight > spaceBelow
+
+  const baseStyle: MenuPositionStyle = {
+    position: 'fixed',
+    left: `${left}px`,
+    transform: 'translate(-50%, 0)'
+  }
+
+  if (wouldOverflow) {
+    // Dock to bottom of viewport
+    return {
+      ...baseStyle,
+      bottom: '0px'
+    }
+  } else {
+    // Position below trigger as normal
+    return {
+      ...baseStyle,
+      top: `${initialTop}px`
+    }
+  }
+}