From 659cbc05a9581b08e95c9659c61b6b554c9658db Mon Sep 17 00:00:00 2001 From: hjlarry Date: Sat, 4 Oct 2025 21:24:27 +0800 Subject: [PATCH] fix mention-input in the bottom of the browser --- .../workflow/comment/mention-input.tsx | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/web/app/components/workflow/comment/mention-input.tsx b/web/app/components/workflow/comment/mention-input.tsx index 8f775b46cf..6972d935fa 100644 --- a/web/app/components/workflow/comment/mention-input.tsx +++ b/web/app/components/workflow/comment/mention-input.tsx @@ -164,12 +164,20 @@ export const MentionInput: FC = memo(({ const dropdownPosition = useMemo(() => { if (!showMentionDropdown || !textareaRef.current) - return { x: 0, y: 0 } + return { x: 0, y: 0, placement: 'bottom' as const } const textareaRect = textareaRef.current.getBoundingClientRect() + const dropdownHeight = 160 // max-h-40 = 10rem = 160px + const viewportHeight = window.innerHeight + const spaceBelow = viewportHeight - textareaRect.bottom + const spaceAbove = textareaRect.top + + const shouldPlaceAbove = spaceBelow < dropdownHeight && spaceAbove > spaceBelow + return { x: textareaRect.left, - y: textareaRect.bottom + 4, + y: shouldPlaceAbove ? textareaRect.top - 4 : textareaRect.bottom + 4, + placement: shouldPlaceAbove ? 'top' as const : 'bottom' as const, } }, [showMentionDropdown]) @@ -391,7 +399,9 @@ export const MentionInput: FC = memo(({ className="fixed z-[9999] max-h-40 w-64 overflow-y-auto rounded-lg border border-components-panel-border bg-components-panel-bg shadow-lg" style={{ left: dropdownPosition.x, - top: dropdownPosition.y, + [dropdownPosition.placement === 'top' ? 'bottom' : 'top']: dropdownPosition.placement === 'top' + ? window.innerHeight - dropdownPosition.y + : dropdownPosition.y, }} data-mention-dropdown >