fix(web): improve floating UI positioning when scrolling (#24595) (#24782)

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)}
       />