From 441bbd5b9aa008a45e5165014349300280682a7c Mon Sep 17 00:00:00 2001
From: Chris Farhood <chris@farhood.org>
Date: Sat, 2 May 2026 07:15:08 -0400
Subject: [PATCH] feat(env): allow multi-line env var values via auto-growing
 textarea

Replace the plain-value <input> with the shadcn Textarea (which has
field-sizing: content baked in). Starts at rows={1}, grows as content
needs more vertical space. Storage and runtime already preserve newlines
so this is purely a UI capability change.
---
 ui/src/components/EnvVarEditor.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/ui/src/components/EnvVarEditor.tsx b/ui/src/components/EnvVarEditor.tsx
index 01df6d55..39790ba9 100644
--- a/ui/src/components/EnvVarEditor.tsx
+++ b/ui/src/components/EnvVarEditor.tsx
@@ -2,6 +2,7 @@ import { useEffect, useRef, useState } from "react";
 import type { CompanySecret, EnvBinding } from "@paperclipai/shared";
 import { X } from "lucide-react";
 import { cn } from "../lib/utils";
+import { Textarea } from "./ui/textarea";
 
 const inputClass =
   "w-full rounded-md border border-border px-2.5 py-1.5 bg-transparent outline-none text-sm font-mono placeholder:text-muted-foreground/40";
@@ -212,8 +213,9 @@ export function EnvVarEditor({
               </>
             ) : (
               <>
-                <input
-                  className={cn(inputClass, "flex-[3]")}
+                <Textarea
+                  rows={1}
+                  className={cn(inputClass, "flex-[3] min-h-0 resize-none shadow-none")}
                   placeholder="value"
                   value={row.plainValue}
                   onChange={(event) => updateRow(index, { plainValue: event.target.value })}