From f88d89fdc8b3ecb7e04ba01b3f5ffd4cb9aaea48 Mon Sep 17 00:00:00 2001
From: Nyk <0xnykcd@googlemail.com>
Date: Thu, 5 Mar 2026 22:05:10 +0700
Subject: [PATCH] fix: improve mention autocomplete placement in task UI

---
 src/components/panels/task-board-panel.tsx | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/components/panels/task-board-panel.tsx b/src/components/panels/task-board-panel.tsx
index 95df955..41c12f8 100644
--- a/src/components/panels/task-board-panel.tsx
+++ b/src/components/panels/task-board-panel.tsx
@@ -137,6 +137,7 @@ function MentionTextarea({
   const [activeIndex, setActiveIndex] = useState(0)
   const [query, setQuery] = useState('')
   const [range, setRange] = useState<{ start: number; end: number } | null>(null)
+  const [openUpwards, setOpenUpwards] = useState(false)
 
   const filtered = mentionTargets
     .filter((target) => {
@@ -178,6 +179,18 @@ function MentionTextarea({
     })
   }
 
+  useEffect(() => {
+    if (!open) return
+    const node = textareaRef.current
+    if (!node) return
+
+    const rect = node.getBoundingClientRect()
+    const estimatedMenuHeight = Math.min(Math.max(filtered.length, 1) * 46 + 12, 224)
+    const availableBelow = window.innerHeight - rect.bottom
+    const availableAbove = rect.top
+    setOpenUpwards(availableBelow < estimatedMenuHeight && availableAbove > availableBelow)
+  }, [open, filtered.length])
+
   return (
     <div className="relative">
       <textarea
@@ -217,7 +230,9 @@ function MentionTextarea({
         className={className}
       />
       {open && filtered.length > 0 && (
-        <div className="absolute z-[60] mt-1 w-full bg-surface-1 border border-border rounded-md shadow-xl max-h-56 overflow-y-auto">
+        <div className={`absolute z-[60] w-full bg-surface-1 border border-border rounded-md shadow-xl max-h-56 overflow-y-auto ${
+          openUpwards ? 'bottom-full mb-1' : 'mt-1'
+        }`}>
           {filtered.map((option, index) => (
             <button
               key={`${option.type}-${option.handle}-${option.recipient}`}