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, FloatingPortal,
autoUpdate, autoUpdate,
flip, flip,
hide,
offset, offset,
shift, shift,
size, size,
@@ -39,7 +40,7 @@ export function usePortalToFollowElem({
triggerPopupSameWidth, triggerPopupSameWidth,
}: PortalToFollowElemOptions = {}) { }: PortalToFollowElemOptions = {}) {
const setOpen = setControlledOpen const setOpen = setControlledOpen
const container = document.getElementById('workflow-container') || document.body
const data = useFloating({ const data = useFloating({
placement, placement,
open, open,
@@ -50,9 +51,17 @@ export function usePortalToFollowElem({
flip({ flip({
crossAxis: placement.includes('-'), crossAxis: placement.includes('-'),
fallbackAxisSideDirection: 'start', 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({ size({
apply({ rects, elements }) { apply({ rects, elements }) {
if (triggerPopupSameWidth) if (triggerPopupSameWidth)
@@ -133,9 +142,9 @@ export const PortalToFollowElemTrigger = (
context.getReferenceProps({ context.getReferenceProps({
ref, ref,
...props, ...props,
...children.props, ...(children.props || {}),
'data-state': context.open ? 'open' : 'closed', 'data-state': context.open ? 'open' : 'closed',
}), } as React.HTMLProps<HTMLElement>),
) )
} }
@@ -177,6 +186,7 @@ export const PortalToFollowElemContent = (
style={{ style={{
...context.floatingStyles, ...context.floatingStyles,
...style, ...style,
visibility: context.middlewareData.hide?.referenceHidden ? 'hidden' : 'visible',
}} }}
{...context.getFloatingProps(props)} {...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 className={cn(className, inline && 'flex w-full items-center justify-between')}>
<div <div
onClick={() => supportFold && toggleFold()} 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='flex h-6 items-center'>
<div className={cn(isSubTitle ? 'system-xs-medium-uppercase text-text-tertiary' : 'system-sm-semibold-uppercase text-text-secondary')}> <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>} {title} {required && <span className='text-text-destructive'>*</span>}

View File

@@ -418,9 +418,8 @@ const BasePanel: FC<BasePanelProps> = ({
} }
<Split /> <Split />
</div> </div>
{tabType === TabType.settings && ( {tabType === TabType.settings && (
<> <div className='flex-1 overflow-y-auto'>
<div> <div>
{cloneElement(children as any, { {cloneElement(children as any, {
id, id,
@@ -465,7 +464,7 @@ const BasePanel: FC<BasePanelProps> = ({
</div> </div>
) )
} }
</> </div>
)} )}
{tabType === TabType.lastRun && ( {tabType === TabType.lastRun && (