diff --git a/ui/src/components/ui/textarea.tsx b/ui/src/components/ui/textarea.tsx
index 7f21b5e7..33f75628 100644
--- a/ui/src/components/ui/textarea.tsx
+++ b/ui/src/components/ui/textarea.tsx
@@ -7,7 +7,7 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
     <textarea
       data-slot="textarea"
       className={cn(
-        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 min-w-0 w-full max-w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
         className
       )}
       {...props}
diff --git a/ui/src/pages/Secrets.render.test.tsx b/ui/src/pages/Secrets.render.test.tsx
index 954b2409..a61ba7cd 100644
--- a/ui/src/pages/Secrets.render.test.tsx
+++ b/ui/src/pages/Secrets.render.test.tsx
@@ -305,4 +305,43 @@ describe("Secrets page layout", () => {
       root.unmount();
     });
   });
+
+  it("keeps the new secret value textarea width-constrained for long tokens", async () => {
+    const root = createRoot(container);
+    const queryClient = new QueryClient({
+      defaultOptions: { queries: { retry: false } },
+    });
+
+    await act(async () => {
+      root.render(
+        <MemoryRouter>
+          <QueryClientProvider client={queryClient}>
+            <Secrets />
+          </QueryClientProvider>
+        </MemoryRouter>,
+      );
+    });
+    await flushReact();
+    await flushReact();
+
+    const newSecretButton = Array.from(container.querySelectorAll("button")).find(
+      (button) => button.textContent?.includes("New secret"),
+    ) as HTMLButtonElement | undefined;
+    expect(newSecretButton).toBeDefined();
+
+    await act(async () => {
+      newSecretButton?.click();
+    });
+    await flushReact();
+
+    const secretValueTextarea = document.body.querySelector("#new-secret-value") as HTMLTextAreaElement | null;
+    expect(secretValueTextarea).not.toBeNull();
+    expect(secretValueTextarea?.className).toContain("min-w-0");
+    expect(secretValueTextarea?.className).toContain("overflow-x-hidden");
+    expect(secretValueTextarea?.className).toContain("break-all");
+
+    await act(async () => {
+      root.unmount();
+    });
+  });
 });
diff --git a/ui/src/pages/Secrets.tsx b/ui/src/pages/Secrets.tsx
index ec290a45..fea13de9 100644
--- a/ui/src/pages/Secrets.tsx
+++ b/ui/src/pages/Secrets.tsx
@@ -1224,7 +1224,7 @@ export function Secrets() {
                       setCreateForm((current) => ({ ...current, value: event.target.value }))
                     }
                     rows={3}
-                    className="font-mono text-xs"
+                    className="min-w-0 overflow-x-hidden break-all font-mono text-xs"
                     placeholder="Stored once, never re-displayed"
                   />
                 </div>