diff --git a/apps/ai-game-creator-shell/src/features/project-workspace/ResourceReferenceInput.tsx b/apps/ai-game-creator-shell/src/features/project-workspace/ResourceReferenceInput.tsx index 7e87f6804..6fcb4a241 100644 --- a/apps/ai-game-creator-shell/src/features/project-workspace/ResourceReferenceInput.tsx +++ b/apps/ai-game-creator-shell/src/features/project-workspace/ResourceReferenceInput.tsx @@ -367,15 +367,48 @@ function ResourceReferenceEditor({ ); const renderMentionMenu: MenuRenderFn = useCallback( - (anchorElementRef, itemProps) => { - if (!anchorElementRef.current || itemProps.options.length === 0) { + (_anchorElementRef, itemProps) => { + const inputRect = rootRef.current?.getBoundingClientRect(); + if (!inputRect || itemProps.options.length === 0) { return null; } + const viewportPadding = 12; + const menuWidth = Math.min( + Math.max(280, inputRect.width), + Math.min(420, window.innerWidth - viewportPadding * 2), + ); + const left = Math.min( + Math.max(viewportPadding, inputRect.left), + Math.max( + viewportPadding, + window.innerWidth - menuWidth - viewportPadding, + ), + ); + const availableAbove = Math.max(0, inputRect.top - viewportPadding - 8); + const availableBelow = Math.max( + 0, + window.innerHeight - inputRect.bottom - viewportPadding - 8, + ); + const openAbove = availableBelow < 160 && availableAbove > availableBelow; + const maxHeight = Math.max( + 120, + Math.min(240, openAbove ? availableAbove : availableBelow), + ); + const top = openAbove + ? Math.max(viewportPadding, inputRect.top - maxHeight - 8) + : inputRect.bottom + 8; return createPortal(
{itemProps.options.map((option, index) => (
, - anchorElementRef.current, + document.body, ); }, [],