From f7f4faff62cc156db1cb81d9235f6791a6fb59ef Mon Sep 17 00:00:00 2001
From: DustyShoe <warukeichi@gmail.com>
Date: Mon, 4 May 2026 19:03:05 +0300
Subject: [PATCH] fix(UI): keep resize handle out of prompt textarea

---
 .../parameters/components/Core/ParamNegativePrompt.tsx     | 7 +++++--
 .../parameters/components/Core/ParamPositivePrompt.tsx     | 7 +++++--
 .../parameters/components/Prompts/PromptResizeHandle.tsx   | 2 +-
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/invokeai/frontend/web/src/features/parameters/components/Core/ParamNegativePrompt.tsx b/invokeai/frontend/web/src/features/parameters/components/Core/ParamNegativePrompt.tsx
index b0405c0ff38..74a50153e50 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Core/ParamNegativePrompt.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Core/ParamNegativePrompt.tsx
@@ -4,7 +4,10 @@ import { usePersistedTextAreaSize } from 'common/hooks/usePersistedTextareaSize'
 import { negativePromptChanged, selectNegativePromptWithFallback } from 'features/controlLayers/store/paramsSlice';
 import { PromptLabel } from 'features/parameters/components/Prompts/PromptLabel';
 import { PromptOverlayButtonWrapper } from 'features/parameters/components/Prompts/PromptOverlayButtonWrapper';
-import { PromptResizeHandle } from 'features/parameters/components/Prompts/PromptResizeHandle';
+import {
+  PROMPT_RESIZE_HANDLE_HEIGHT_PX,
+  PromptResizeHandle,
+} from 'features/parameters/components/Prompts/PromptResizeHandle';
 import { ViewModePrompt } from 'features/parameters/components/Prompts/ViewModePrompt';
 import { AddPromptTriggerButton } from 'features/prompt/AddPromptTriggerButton';
 import { PromptPopover } from 'features/prompt/PromptPopover';
@@ -64,7 +67,7 @@ export const ParamNegativePrompt = memo(() => {
 
   return (
     <PromptPopover isOpen={isOpen} onClose={onClose} onSelect={onSelect} width={textareaRef.current?.clientWidth}>
-      <Box pos="relative" w="full">
+      <Box pos="relative" w="full" pb={`${PROMPT_RESIZE_HANDLE_HEIGHT_PX}px`}>
         <Textarea
           className="negative-prompt-textarea"
           name="negativePrompt"
diff --git a/invokeai/frontend/web/src/features/parameters/components/Core/ParamPositivePrompt.tsx b/invokeai/frontend/web/src/features/parameters/components/Core/ParamPositivePrompt.tsx
index 5167dd1527b..955eeb4abf0 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Core/ParamPositivePrompt.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Core/ParamPositivePrompt.tsx
@@ -16,7 +16,10 @@ import { ShowDynamicPromptsPreviewButton } from 'features/dynamicPrompts/compone
 import { NegativePromptToggleButton } from 'features/parameters/components/Core/NegativePromptToggleButton';
 import { PromptLabel } from 'features/parameters/components/Prompts/PromptLabel';
 import { PromptOverlayButtonWrapper } from 'features/parameters/components/Prompts/PromptOverlayButtonWrapper';
-import { PromptResizeHandle } from 'features/parameters/components/Prompts/PromptResizeHandle';
+import {
+  PROMPT_RESIZE_HANDLE_HEIGHT_PX,
+  PromptResizeHandle,
+} from 'features/parameters/components/Prompts/PromptResizeHandle';
 import { ViewModePrompt } from 'features/parameters/components/Prompts/ViewModePrompt';
 import { AddPromptTriggerButton } from 'features/prompt/AddPromptTriggerButton';
 import { ExpandPromptButton } from 'features/prompt/ExpandPromptButton';
@@ -278,7 +281,7 @@ export const ParamPositivePrompt = memo(() => {
   return (
     <Box pos="relative" ref={dropTargetRef}>
       <PromptPopover isOpen={isOpen} onClose={onClose} onSelect={onSelect} width={textareaRef.current?.clientWidth}>
-        <Box pos="relative">
+        <Box pos="relative" pb={`${PROMPT_RESIZE_HANDLE_HEIGHT_PX}px`}>
           <Textarea
             className="positive-prompt-textarea"
             name="prompt"
diff --git a/invokeai/frontend/web/src/features/parameters/components/Prompts/PromptResizeHandle.tsx b/invokeai/frontend/web/src/features/parameters/components/Prompts/PromptResizeHandle.tsx
index 0a5f211924d..7128798aa46 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Prompts/PromptResizeHandle.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Prompts/PromptResizeHandle.tsx
@@ -14,7 +14,7 @@ type PromptResizeHandleProps = {
   minHeight: number;
 };
 
-const PROMPT_RESIZE_HANDLE_HEIGHT_PX = 8;
+export const PROMPT_RESIZE_HANDLE_HEIGHT_PX = 8;
 
 export const PromptResizeHandle = memo(({ textareaRef, minHeight }: PromptResizeHandleProps) => {
   const activePointerIdRef = useRef<number | null>(null);