From a845e0ae742a4123754bcbccf9c3000e964f9c03 Mon Sep 17 00:00:00 2001
From: hjlarry <hjlarry@163.com>
Date: Thu, 26 Mar 2026 14:41:16 +0800
Subject: [PATCH] fix: the menu of multi nodes always display on left top
 corner

---
 .../workflow/selection-contextmenu.tsx        | 46 ++++++++++---------
 1 file changed, 25 insertions(+), 21 deletions(-)

diff --git a/web/app/components/workflow/selection-contextmenu.tsx b/web/app/components/workflow/selection-contextmenu.tsx
index 54e6ea2045..28acead508 100644
--- a/web/app/components/workflow/selection-contextmenu.tsx
+++ b/web/app/components/workflow/selection-contextmenu.tsx
@@ -18,14 +18,14 @@ import {
 import { useTranslation } from 'react-i18next'
 import { useStore as useReactFlowStore, useStoreApi } from 'reactflow'
 import {
-  ContextMenu,
-  ContextMenuContent,
-  ContextMenuGroup,
-  ContextMenuGroupLabel,
-  ContextMenuItem,
-  ContextMenuSeparator,
-  ContextMenuTrigger,
-} from '@/app/components/base/ui/context-menu'
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuGroupLabel,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/app/components/base/ui/dropdown-menu'
 import { useNodesReadOnly, useNodesSyncDraft } from './hooks'
 import { useSelectionInteractions } from './hooks/use-selection-interactions'
 import { useWorkflowHistory, WorkflowHistoryEvent } from './hooks/use-workflow-history'
@@ -360,40 +360,44 @@ const SelectionContextmenu = () => {
         top: menuPosition.top,
       }}
     >
-      <ContextMenu
+      <DropdownMenu
         open
         onOpenChange={(open) => {
           if (!open)
             handleSelectionContextmenuCancel()
         }}
       >
-        <ContextMenuTrigger>
+        <DropdownMenuTrigger>
           <span aria-hidden className="block size-px opacity-0" />
-        </ContextMenuTrigger>
-        <ContextMenuContent popupClassName="w-[240px]">
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
+          placement="bottom-start"
+          sideOffset={0}
+          popupClassName="w-[240px]"
+        >
           {menuSections.map((section, sectionIndex) => (
-            <ContextMenuGroup key={section.titleKey}>
-              {sectionIndex > 0 && <ContextMenuSeparator />}
-              <ContextMenuGroupLabel>
+            <DropdownMenuGroup key={section.titleKey}>
+              {sectionIndex > 0 && <DropdownMenuSeparator />}
+              <DropdownMenuGroupLabel>
                 {t(section.titleKey, { defaultValue: section.titleKey, ns: 'workflow' })}
-              </ContextMenuGroupLabel>
+              </DropdownMenuGroupLabel>
               {section.items.map((item) => {
                 const Icon = item.icon
                 return (
-                  <ContextMenuItem
+                  <DropdownMenuItem
                     key={item.alignType}
                     data-testid={`selection-contextmenu-item-${item.alignType}`}
                     onClick={() => handleAlignNodes(item.alignType)}
                   >
                     <Icon className={`h-4 w-4 ${item.iconClassName ?? ''}`.trim()} />
                     {t(item.translationKey, { defaultValue: item.translationKey, ns: 'workflow' })}
-                  </ContextMenuItem>
+                  </DropdownMenuItem>
                 )
               })}
-            </ContextMenuGroup>
+            </DropdownMenuGroup>
           ))}
-        </ContextMenuContent>
-      </ContextMenu>
+        </DropdownMenuContent>
+      </DropdownMenu>
     </div>
   )
 }