From 4e513966768cde0eed812cbc2a7a417422910f49 Mon Sep 17 00:00:00 2001
From: Waleed Latif <walif6@gmail.com>
Date: Fri, 1 May 2026 17:57:17 -0700
Subject: [PATCH 1/3] improvement(home): anchor @-mention popup at caret and
 right-size dropdown widths

---
 .../components/plus-menu-dropdown.tsx         |  6 +--
 .../home/components/user-input/user-input.tsx | 54 ++++++++++++++++---
 2 files changed, 50 insertions(+), 10 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/plus-menu-dropdown.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/plus-menu-dropdown.tsx
index 8bca03e6ec7..715fa4f0387 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/plus-menu-dropdown.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/plus-menu-dropdown.tsx
@@ -251,7 +251,7 @@ export const PlusMenuDropdown = React.memo(
               // Plus-click shows short fixed labels (Workflows, Tables, …) — let it size
               // to its content via the emcn DropdownMenuContent default max-w.
               // Mention mode renders resource names directly, so widen for breathing room.
-              isMention && 'w-[300px] max-w-[calc(100vw-32px)]'
+              isMention && 'max-w-[min(300px,calc(100vw-32px))]'
             )}
             onCloseAutoFocus={handleCloseAutoFocus}
             onOpenAutoFocus={handleOpenAutoFocus}
@@ -286,7 +286,7 @@ export const PlusMenuDropdown = React.memo(
                       />
                       <span>Workflows</span>
                     </DropdownMenuSubTrigger>
-                    <DropdownMenuSubContent className='w-[300px] max-w-[calc(100vw-32px)]'>
+                    <DropdownMenuSubContent className='max-w-[min(300px,calc(100vw-32px))]'>
                       <WorkflowFolderTreeItems nodes={workflowTree} onSelect={handleSelect} />
                     </DropdownMenuSubContent>
                   </DropdownMenuSub>
@@ -303,7 +303,7 @@ export const PlusMenuDropdown = React.memo(
                           <Icon className='h-[14px] w-[14px]' />
                           <span>{config.label}</span>
                         </DropdownMenuSubTrigger>
-                        <DropdownMenuSubContent className='w-[300px] max-w-[calc(100vw-32px)]'>
+                        <DropdownMenuSubContent className='max-w-[min(300px,calc(100vw-32px))]'>
                           {items.map((item) => (
                             <DropdownMenuItem
                               key={item.id}
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx
index 78e9ace4828..65ed542475b 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx
@@ -58,6 +58,50 @@ import type { ChatContext } from '@/stores/panel'
 
 export type { FileAttachmentForApi } from '@/app/workspace/[workspaceId]/home/types'
 
+function getCaretAnchor(
+  textarea: HTMLTextAreaElement,
+  caretPos: number
+): { left: number; top: number } {
+  const textareaRect = textarea.getBoundingClientRect()
+  const style = window.getComputedStyle(textarea)
+
+  const mirror = document.createElement('div')
+  mirror.style.position = 'absolute'
+  mirror.style.top = '0'
+  mirror.style.left = '0'
+  mirror.style.visibility = 'hidden'
+  mirror.style.whiteSpace = 'pre-wrap'
+  mirror.style.overflowWrap = 'break-word'
+  mirror.style.font = style.font
+  mirror.style.padding = style.padding
+  mirror.style.border = style.border
+  mirror.style.width = style.width
+  mirror.style.lineHeight = style.lineHeight
+  mirror.style.boxSizing = style.boxSizing
+  mirror.style.letterSpacing = style.letterSpacing
+  mirror.style.textTransform = style.textTransform
+  mirror.style.textIndent = style.textIndent
+  mirror.style.textAlign = style.textAlign
+  mirror.textContent = textarea.value.substring(0, caretPos)
+
+  const marker = document.createElement('span')
+  marker.style.display = 'inline-block'
+  marker.style.width = '0px'
+  marker.style.padding = '0'
+  marker.style.border = '0'
+  mirror.appendChild(marker)
+
+  document.body.appendChild(mirror)
+  const markerRect = marker.getBoundingClientRect()
+  const mirrorRect = mirror.getBoundingClientRect()
+  document.body.removeChild(mirror)
+
+  return {
+    left: textareaRect.left + (markerRect.left - mirrorRect.left) - textarea.scrollLeft,
+    top: textareaRect.top + (markerRect.top - mirrorRect.top) - textarea.scrollTop,
+  }
+}
+
 interface UserInputProps {
   defaultValue?: string
   draftScopeKey?: string
@@ -304,7 +348,6 @@ export const UserInput = forwardRef<UserInputHandle, UserInputProps>(function Us
   const pendingCursorRef = useRef<number | null>(null)
   const mentionRangeRef = useRef<{ start: number; end: number } | null>(null)
   const [mentionQuery, setMentionQuery] = useState<string | null>(null)
-  const containerRef = useRef<HTMLDivElement>(null)
 
   useImperativeHandle(
     ref,
@@ -664,7 +707,7 @@ export const UserInput = forwardRef<UserInputHandle, UserInputProps>(function Us
   getActiveMentionAtRef.current = mentionMenu.getActiveMentionQueryAtPosition
 
   const syncMentionState = useCallback(
-    (_textarea: HTMLTextAreaElement, text: string, caret: number) => {
+    (textarea: HTMLTextAreaElement, text: string, caret: number) => {
       const active = getActiveMentionAtRef.current(caret, text)
       // Treat any whitespace inside the query as a closer — typing a space
       // after `@foo` should leave the raw `@foo` text and dismiss the menu.
@@ -682,10 +725,8 @@ export const UserInput = forwardRef<UserInputHandle, UserInputProps>(function Us
       mentionRangeRef.current = { start: active.start, end: active.end }
       setMentionQuery(active.query)
       if (!wasActive) {
-        // Anchor above the whole input box (not at the caret) so the menu can never
-        // overlap the user's typing.
-        const rect = containerRef.current?.getBoundingClientRect()
-        const anchor = rect ? { left: rect.left, top: rect.top } : { left: 0, top: 0 }
+        // Anchor at the caret so the menu floats above the user's cursor.
+        const anchor = getCaretAnchor(textarea, active.start)
         plusMenuRef.current?.open(anchor, { mention: true })
       }
     },
@@ -834,7 +875,6 @@ export const UserInput = forwardRef<UserInputHandle, UserInputProps>(function Us
 
   return (
     <div
-      ref={containerRef}
       onClick={handleContainerClick}
       className={cn(
         'relative z-10 mx-auto w-full max-w-[42rem] cursor-text rounded-[20px] border border-[var(--border-1)] bg-[var(--white)] px-2.5 py-2 dark:bg-[var(--surface-4)]',

From f9f0f75f21e4cdbdbe45f386450bed642a11a179 Mon Sep 17 00:00:00 2001
From: Waleed Latif <walif6@gmail.com>
Date: Fri, 1 May 2026 18:15:04 -0700
Subject: [PATCH 2/3] fix(home): align caret-anchor marker to text-top so
 mention popup clears glyph

---
 .../[workspaceId]/home/components/user-input/user-input.tsx      | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx
index 65ed542475b..2f17d62486c 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx
@@ -89,6 +89,7 @@ function getCaretAnchor(
   marker.style.width = '0px'
   marker.style.padding = '0'
   marker.style.border = '0'
+  marker.style.verticalAlign = 'text-top'
   mirror.appendChild(marker)
 
   document.body.appendChild(mirror)

From 8216b53b2260e22ad0a800fe97d3be98a3d0f1f7 Mon Sep 17 00:00:00 2001
From: Waleed Latif <walif6@gmail.com>
Date: Fri, 1 May 2026 18:51:06 -0700
Subject: [PATCH 3/3] fix(home): enable collision avoidance for @-mention popup
 so it fits in narrow chats

---
 .../components/user-input/components/plus-menu-dropdown.tsx    | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/plus-menu-dropdown.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/plus-menu-dropdown.tsx
index 715fa4f0387..bc9060f3f51 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/plus-menu-dropdown.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/plus-menu-dropdown.tsx
@@ -245,7 +245,8 @@ export const PlusMenuDropdown = React.memo(
             align='start'
             side='top'
             sideOffset={8}
-            avoidCollisions={!isMention}
+            avoidCollisions
+            collisionPadding={8}
             className={cn(
               'flex flex-col overflow-hidden',
               // Plus-click shows short fixed labels (Workflows, Tables, …) — let it size