Make prompt input textareas resizable (#3691) (#3739)

Author: mrubens

webview-ui/src/components/prompts/PromptsView.tsx

@@ -715,6 +715,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 							{t("prompts:roleDefinition.description")}
 						</div>
 						<VSCodeTextArea
+							resize="vertical"
 							value={(() => {
 								const customMode = findModeBySlug(visualMode, customModes)
 								const prompt = customModePrompts?.[visualMode] as PromptComponent
@@ -743,7 +744,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 									})
 								}
 							}}
-							className="resize-y w-full"
+							className="w-full"
 							rows={4}
 							data-testid={`${getCurrentMode()?.slug || "code"}-prompt-textarea`}
 						/>
@@ -773,6 +774,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 							{t("prompts:whenToUse.description")}
 						</div>
 						<VSCodeTextArea
+							resize="vertical"
 							value={(() => {
 								const customMode = findModeBySlug(visualMode, customModes)
 								const prompt = customModePrompts?.[visualMode] as PromptComponent
@@ -797,7 +799,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 									})
 								}
 							}}
-							className="resize-y w-full"
+							className="w-full"
 							rows={3}
 							data-testid={`${getCurrentMode()?.slug || "code"}-when-to-use-textarea`}
 						/>
@@ -924,6 +926,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 							})}
 						</div>
 						<VSCodeTextArea
+							resize="vertical"
 							value={(() => {
 								const customMode = findModeBySlug(visualMode, customModes)
 								const prompt = customModePrompts?.[visualMode] as PromptComponent
@@ -955,7 +958,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 								}
 							}}
 							rows={4}
-							className="w-full resize-y"
+							className="w-full"
 							data-testid={`${getCurrentMode()?.slug || "code"}-custom-instructions-textarea`}
 						/>
 						<div className="text-xs text-vscode-descriptionForeground mt-1.5">
@@ -1092,6 +1095,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 						</Trans>
 					</div>
 					<VSCodeTextArea
+						resize="vertical"
 						value={customInstructions || ""}
 						onChange={(e) => {
 							const value =
@@ -1104,7 +1108,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 							})
 						}}
 						rows={4}
-						className="w-full resize-y"
+						className="w-full"
 						data-testid="global-custom-instructions-textarea"
 					/>
 					<div className="text-xs text-vscode-descriptionForeground mt-1.5">
@@ -1170,6 +1174,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 						</div>
 
 						<VSCodeTextArea
+							resize="vertical"
 							value={getSupportPromptValue(activeSupportOption)}
 							onChange={(e) => {
 								const value =
@@ -1179,7 +1184,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 								updateSupportPrompt(activeSupportOption, trimmedValue || undefined)
 							}}
 							rows={6}
-							className="resize-y w-full"
+							className="w-full"
 						/>
 
 						{activeSupportOption === "ENHANCE" && (
@@ -1230,11 +1235,12 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 
 								<div className="mt-4">
 									<VSCodeTextArea
+										resize="vertical"
 										value={testPrompt}
 										onChange={(e) => setTestPrompt((e.target as HTMLTextAreaElement).value)}
 										placeholder={t("prompts:supportPrompts.enhance.testPromptPlaceholder")}
 										rows={3}
-										className="w-full resize-y"
+										className="w-full"
 										data-testid="test-prompt-textarea"
 									/>
 									<div className="mt-2 flex justify-start items-center gap-2">
@@ -1335,12 +1341,13 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 									{t("prompts:createModeDialog.roleDefinition.description")}
 								</div>
 								<VSCodeTextArea
+									resize="vertical"
 									value={newModeRoleDefinition}
 									onChange={(e) => {
 										setNewModeRoleDefinition((e.target as HTMLTextAreaElement).value)
 									}}
 									rows={4}
-									className="w-full resize-y"
+									className="w-full"
 								/>
 								{roleDefinitionError && (
 									<div className="text-xs text-vscode-errorForeground mt-1">
@@ -1355,12 +1362,13 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 									{t("prompts:createModeDialog.whenToUse.description")}
 								</div>
 								<VSCodeTextArea
+									resize="vertical"
 									value={newModeWhenToUse}
 									onChange={(e) => {
 										setNewModeWhenToUse((e.target as HTMLTextAreaElement).value)
 									}}
 									rows={3}
-									className="w-full resize-y"
+									className="w-full"
 								/>
 							</div>
 							<div className="mb-4">
@@ -1401,12 +1409,13 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 									{t("prompts:createModeDialog.customInstructions.description")}
 								</div>
 								<VSCodeTextArea
+									resize="vertical"
 									value={newModeCustomInstructions}
 									onChange={(e) => {
 										setNewModeCustomInstructions((e.target as HTMLTextAreaElement).value)
 									}}
 									rows={4}
-									className="w-full resize-y"
+									className="w-full"
 								/>
 							</div>
 						</div>