From 40e3e7b0186539b0f40cc993f4131832cc217536 Mon Sep 17 00:00:00 2001
From: Rowan Smith <rowan@coder.com>
Date: Wed, 15 Jul 2026 06:19:03 +0000
Subject: [PATCH] fix for multiline secrets in the UI

---
 .../pages/UserSettingsPage/SecretsPage/SecretDialog.tsx  | 9 ++++-----
 .../SecretsPage/SecretsPageView.stories.tsx              | 8 +++++---
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/site/src/pages/UserSettingsPage/SecretsPage/SecretDialog.tsx b/site/src/pages/UserSettingsPage/SecretsPage/SecretDialog.tsx
index 4e6709ed715..145c6a012c2 100644
--- a/site/src/pages/UserSettingsPage/SecretsPage/SecretDialog.tsx
+++ b/site/src/pages/UserSettingsPage/SecretsPage/SecretDialog.tsx
@@ -15,7 +15,6 @@ import {
 	DialogTitle,
 } from "#/components/Dialog/Dialog";
 import { FormField } from "#/components/FormField/FormField";
-import { Input } from "#/components/Input/Input";
 import { Label } from "#/components/Label/Label";
 import { Spinner } from "#/components/Spinner/Spinner";
 import { Textarea } from "#/components/Textarea/Textarea";
@@ -353,13 +352,13 @@ const SecretValueField: FC<SecretValueFieldProps> = ({
 				{required ? <RequiredFieldLabel>Value</RequiredFieldLabel> : "Value"}
 			</Label>
 			<div className="flex flex-col gap-2 sm:flex-row sm:items-start">
-				<Input
+				<Textarea
 					id={field.id}
 					name={field.name}
-					type="text"
 					value={value}
 					placeholder={placeholder}
 					autoComplete="off"
+					rows={4}
 					aria-required={required}
 					aria-invalid={displayField.error}
 					aria-describedby={
@@ -371,9 +370,9 @@ const SecretValueField: FC<SecretValueFieldProps> = ({
 					}
 					disabled={clearValueRequested}
 					className={cn(
-						"placeholder:text-content-disabled sm:flex-1",
+						"placeholder:text-content-disabled sm:flex-1 font-mono",
 						displayField.error && "border-border-destructive",
-						maskTypedValue && "[-webkit-text-security:circle]",
+						maskTypedValue && "[-webkit-text-security:disc]",
 					)}
 					onFocus={(event) => {
 						if (isShowingSavedValue) {
diff --git a/site/src/pages/UserSettingsPage/SecretsPage/SecretsPageView.stories.tsx b/site/src/pages/UserSettingsPage/SecretsPage/SecretsPageView.stories.tsx
index 0485a6ca942..c88cb4f4834 100644
--- a/site/src/pages/UserSettingsPage/SecretsPage/SecretsPageView.stories.tsx
+++ b/site/src/pages/UserSettingsPage/SecretsPage/SecretsPageView.stories.tsx
@@ -393,9 +393,11 @@ export const EditSecretClearValue: Story = {
 		await user.click(dialog.getByRole("button", { name: "Clear" }));
 		await expect(valueField).toHaveValue("");
 		await expect(valueField).toBeDisabled();
-		await expect(
-			dialog.getByText("Saved value will be cleared when you update."),
-		).toBeVisible();
+		await waitFor(() =>
+			expect(
+				dialog.getByText("Saved value will be cleared when you update."),
+			).toBeVisible(),
+		);
 		await expect(updateButton).toBeEnabled();
 
 		await user.click(dialog.getByRole("button", { name: "Undo" }));