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

This commit is contained in:
Matt Rubens 2025-05-20 01:08:57 -04:00 committed by GitHub
parent aff94e13bc
commit a0735bb414
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -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>