From 52e9bcbfdb7bdf4e99d4e3c627ad387423732940 Mon Sep 17 00:00:00 2001
From: zyileven <40888939+zyileven@users.noreply.github.com>
Date: Fri, 29 Aug 2025 16:49:13 +0800
Subject: [PATCH] fix(web): improve floating UI positioning when scrolling
 (#24595) (#24782)

---
 .../base/portal-to-follow-elem/index.tsx      | 20 ++++++++++++++-----
 .../workflow/nodes/_base/components/field.tsx |  2 +-
 .../_base/components/workflow-panel/index.tsx |  5 ++---
 3 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/web/app/components/base/portal-to-follow-elem/index.tsx b/web/app/components/base/portal-to-follow-elem/index.tsx
index 1e2e19877..dd4795c52 100644
--- a/web/app/components/base/portal-to-follow-elem/index.tsx
+++ b/web/app/components/base/portal-to-follow-elem/index.tsx
@@ -4,6 +4,7 @@ import {
   FloatingPortal,
   autoUpdate,
   flip,
+  hide,
   offset,
   shift,
   size,
@@ -39,7 +40,7 @@ export function usePortalToFollowElem({
   triggerPopupSameWidth,
 }: PortalToFollowElemOptions = {}) {
   const setOpen = setControlledOpen
-
+  const container = document.getElementById('workflow-container') || document.body
   const data = useFloating({
     placement,
     open,
@@ -50,9 +51,17 @@ export function usePortalToFollowElem({
       flip({
         crossAxis: placement.includes('-'),
         fallbackAxisSideDirection: 'start',
-        padding: 5,
+        padding: 8,
+      }),
+      shift({
+        padding: 8,
+        boundary: container,
+        altBoundary: true,
+      }),
+      hide({
+        // hide when the reference element is not visible
+        boundary: container,
       }),
-      shift({ padding: 5 }),
       size({
         apply({ rects, elements }) {
           if (triggerPopupSameWidth)
@@ -133,9 +142,9 @@ export const PortalToFollowElemTrigger = (
       context.getReferenceProps({
         ref,
         ...props,
-        ...children.props,
+        ...(children.props || {}),
         'data-state': context.open ? 'open' : 'closed',
-      }),
+      } as React.HTMLProps<HTMLElement>),
     )
   }
 
@@ -177,6 +186,7 @@ export const PortalToFollowElemContent = (
         style={{
           ...context.floatingStyles,
           ...style,
+          visibility: context.middlewareData.hide?.referenceHidden ? 'hidden' : 'visible',
         }}
         {...context.getFloatingProps(props)}
       />
diff --git a/web/app/components/workflow/nodes/_base/components/field.tsx b/web/app/components/workflow/nodes/_base/components/field.tsx
index aadcea106..d82ea027f 100644
--- a/web/app/components/workflow/nodes/_base/components/field.tsx
+++ b/web/app/components/workflow/nodes/_base/components/field.tsx
@@ -38,7 +38,7 @@ const Field: FC<Props> = ({
     <div className={cn(className, inline && 'flex w-full items-center justify-between')}>
       <div
         onClick={() => supportFold && toggleFold()}
-        className={cn('flex items-center justify-between', supportFold && 'cursor-pointer')}>
+        className={cn('sticky top-0 z-10 flex items-center justify-between bg-components-panel-bg', supportFold && 'cursor-pointer')}>
         <div className='flex h-6 items-center'>
           <div className={cn(isSubTitle ? 'system-xs-medium-uppercase text-text-tertiary' : 'system-sm-semibold-uppercase text-text-secondary')}>
             {title} {required && <span className='text-text-destructive'>*</span>}
diff --git a/web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx b/web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx
index f79e251ea..264bb1e45 100644
--- a/web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx
@@ -418,9 +418,8 @@ const BasePanel: FC<BasePanelProps> = ({
           }
           <Split />
         </div>
-
         {tabType === TabType.settings && (
-          <>
+          <div className='flex-1 overflow-y-auto'>
             <div>
               {cloneElement(children as any, {
                 id,
@@ -465,7 +464,7 @@ const BasePanel: FC<BasePanelProps> = ({
                 </div>
               )
             }
-          </>
+          </div>
         )}
 
         {tabType === TabType.lastRun && (