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

This commit is contained in:
zyileven
2025-08-29 16:49:13 +08:00
committed by GitHub
parent 20ae3eae54
commit 52e9bcbfdb
3 changed files with 18 additions and 9 deletions

View File

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

View File

@@ -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>}

View File

@@ -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 && (