Task attempt ed00b339-eaec-4c8f-b4f5-79504e6105c6 - Final changes

frontend/src/components/tasks/TaskDetailsPanel.tsx

@@ -1235,7 +1235,7 @@ export function TaskDetailsPanel({
                         <AlertDescription>{followUpError}</AlertDescription>
                       </Alert>
                     )}
-                    <div className="flex gap-3">
+                    <div className="space-y-3">
                       <FileSearchTextarea
                         placeholder="Ask a follow-up question about this task... Type @ to search files."
                         value={followUpMessage}
@@ -1255,12 +1255,12 @@ export function TaskDetailsPanel({
                             }
                           }
                         }}
-                        className="flex-1 min-h-[80px] resize-none"
+                        className="w-full min-h-[80px] resize-none"
                         disabled={!canSendFollowUp}
                         projectId={projectId}
                         rows={4}
                       />
-                      <div className="flex flex-col justify-end">
+                      <div className="flex justify-end">
                         <Button
                           onClick={handleSendFollowUp}
                           disabled={
@@ -1273,7 +1273,10 @@ export function TaskDetailsPanel({
                           {isSendingFollowUp ? (
                             <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-current" />
                           ) : (
-                            <Send className="h-4 w-4" />
+                            <>
+                              <Send className="h-4 w-4 mr-2" />
+                              Send
+                            </>
                           )}
                         </Button>
                       </div>

frontend/src/components/ui/file-search-textarea.tsx

@@ -177,25 +177,28 @@ export function FileSearchTextarea({
     const lineHeight = parseInt(computedStyle.lineHeight) || 20
     const fontSize = parseInt(computedStyle.fontSize) || 14
     const charWidth = fontSize * 0.6 // Approximate character width
+    const paddingLeft = parseInt(computedStyle.paddingLeft) || 12
+    const paddingTop = parseInt(computedStyle.paddingTop) || 8
     
     // Position relative to textarea
-    const relativeTop = (currentLine + 1) * lineHeight + 8
-    const relativeLeft = charWidth * charInLine
+    const relativeTop = paddingTop + (currentLine * lineHeight) + lineHeight
+    const relativeLeft = paddingLeft + (charWidth * charInLine)
     
     // Convert to viewport coordinates
     const viewportTop = textareaRect.top + relativeTop
     const viewportLeft = textareaRect.left + relativeLeft
     
-    // Adjust for viewport boundaries
-    const dropdownHeight = 240 // max-h-60 = 240px
+    // Dropdown dimensions
     const dropdownWidth = 256 // min-w-64 = 256px
+    const minDropdownHeight = 120
+    const maxDropdownHeight = 240 // max-h-60 = 240px
     
     let finalTop = viewportTop
     let finalLeft = viewportLeft
-    let maxHeight = dropdownHeight
+    let maxHeight = maxDropdownHeight
     
     // Prevent going off the right edge
-    if (viewportLeft + dropdownWidth > window.innerWidth) {
+    if (viewportLeft + dropdownWidth > window.innerWidth - 16) {
       finalLeft = window.innerWidth - dropdownWidth - 16
     }
     
@@ -205,20 +208,22 @@ export function FileSearchTextarea({
     }
     
     // Prevent going off the bottom edge
-    if (viewportTop + dropdownHeight > window.innerHeight) {
-      // Try positioning above the line instead
-      const aboveTop = textareaRect.top + (currentLine * lineHeight) - dropdownHeight - 8
-      if (aboveTop > 16) {
-        finalTop = aboveTop
-      } else {
-        // If can't fit above either, limit height and scroll
-        maxHeight = window.innerHeight - viewportTop - 16
-        if (maxHeight < 120) {
-          // If still too small, position at bottom with limited height
-          finalTop = window.innerHeight - 120 - 16
-          maxHeight = 120
-        }
-      }
+    const availableSpaceBelow = window.innerHeight - viewportTop - 16
+    const availableSpaceAbove = textareaRect.top + (currentLine * lineHeight) - 16
+    
+    if (availableSpaceBelow < minDropdownHeight && availableSpaceAbove > availableSpaceBelow) {
+      // Position above the cursor line
+      finalTop = textareaRect.top + paddingTop + (currentLine * lineHeight) - maxDropdownHeight - 8
+      maxHeight = Math.min(maxDropdownHeight, availableSpaceAbove)
+    } else {
+      // Position below the cursor line
+      maxHeight = Math.min(maxDropdownHeight, availableSpaceBelow)
+    }
+    
+    // Ensure minimum height
+    if (maxHeight < minDropdownHeight) {
+      maxHeight = minDropdownHeight
+      finalTop = Math.max(16, window.innerHeight - minDropdownHeight - 16)
     }
     
     return { top: finalTop, left: finalLeft, maxHeight }