Spaces:
Runtime error
Runtime error
Nyk commited on
Commit ·
232d2a7
1
Parent(s): 03a699e
fix: improve mention autocomplete placement in task UI
Browse files
src/components/panels/task-board-panel.tsx
CHANGED
|
@@ -137,6 +137,7 @@ function MentionTextarea({
|
|
| 137 |
const [activeIndex, setActiveIndex] = useState(0)
|
| 138 |
const [query, setQuery] = useState('')
|
| 139 |
const [range, setRange] = useState<{ start: number; end: number } | null>(null)
|
|
|
|
| 140 |
|
| 141 |
const filtered = mentionTargets
|
| 142 |
.filter((target) => {
|
|
@@ -178,6 +179,18 @@ function MentionTextarea({
|
|
| 178 |
})
|
| 179 |
}
|
| 180 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 181 |
return (
|
| 182 |
<div className="relative">
|
| 183 |
<textarea
|
|
@@ -217,7 +230,9 @@ function MentionTextarea({
|
|
| 217 |
className={className}
|
| 218 |
/>
|
| 219 |
{open && filtered.length > 0 && (
|
| 220 |
-
<div className=
|
|
|
|
|
|
|
| 221 |
{filtered.map((option, index) => (
|
| 222 |
<button
|
| 223 |
key={`${option.type}-${option.handle}-${option.recipient}`}
|
|
|
|
| 137 |
const [activeIndex, setActiveIndex] = useState(0)
|
| 138 |
const [query, setQuery] = useState('')
|
| 139 |
const [range, setRange] = useState<{ start: number; end: number } | null>(null)
|
| 140 |
+
const [openUpwards, setOpenUpwards] = useState(false)
|
| 141 |
|
| 142 |
const filtered = mentionTargets
|
| 143 |
.filter((target) => {
|
|
|
|
| 179 |
})
|
| 180 |
}
|
| 181 |
|
| 182 |
+
useEffect(() => {
|
| 183 |
+
if (!open) return
|
| 184 |
+
const node = textareaRef.current
|
| 185 |
+
if (!node) return
|
| 186 |
+
|
| 187 |
+
const rect = node.getBoundingClientRect()
|
| 188 |
+
const estimatedMenuHeight = Math.min(Math.max(filtered.length, 1) * 46 + 12, 224)
|
| 189 |
+
const availableBelow = window.innerHeight - rect.bottom
|
| 190 |
+
const availableAbove = rect.top
|
| 191 |
+
setOpenUpwards(availableBelow < estimatedMenuHeight && availableAbove > availableBelow)
|
| 192 |
+
}, [open, filtered.length])
|
| 193 |
+
|
| 194 |
return (
|
| 195 |
<div className="relative">
|
| 196 |
<textarea
|
|
|
|
| 230 |
className={className}
|
| 231 |
/>
|
| 232 |
{open && filtered.length > 0 && (
|
| 233 |
+
<div className={`absolute z-[60] w-full bg-surface-1 border border-border rounded-md shadow-xl max-h-56 overflow-y-auto ${
|
| 234 |
+
openUpwards ? 'bottom-full mb-1' : 'mt-1'
|
| 235 |
+
}`}>
|
| 236 |
{filtered.map((option, index) => (
|
| 237 |
<button
|
| 238 |
key={`${option.type}-${option.handle}-${option.recipient}`}
|