From da89e102f80b7ef6c8166d41cc202035f6ad75a4 Mon Sep 17 00:00:00 2001
From: Julius Marminge <julius0216@outlook.com>
Date: Tue, 22 Sep 2026 12:22:17 -0700
Subject: [PATCH] refactor(web): every textarea caps its growth; the diff
 comment box is a Textarea (#13036)

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
---
 .../web/src/components/diffs/DiffCommentAnnotation.test.tsx | 6 ++----
 apps/web/src/components/diffs/DiffCommentAnnotation.tsx     | 2 --
 .../src/components/pullRequest/PullRequestCommentForm.tsx   | 1 -
 .../src/components/pullRequest/PullRequestReviewForm.tsx    | 1 -
 apps/web/src/components/ui/textarea.tsx                     | 3 ++-
 scripts/lint-restyle-ceiling.ts                             | 2 +-
 6 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/apps/web/src/components/diffs/DiffCommentAnnotation.test.tsx b/apps/web/src/components/diffs/DiffCommentAnnotation.test.tsx
index d430e38371480214022b3ca08362dfea8ab9be9a..6feb102c87ccc1d66b83fb22a4c9b09dbc000496 100644
--- a/apps/web/src/components/diffs/DiffCommentAnnotation.test.tsx
+++ b/apps/web/src/components/diffs/DiffCommentAnnotation.test.tsx
@@ -25,10 +25,8 @@ describe("DiffCommentAnnotation", () => {
     expect(markup).toContain("Add a comment…");
     expect(markup).toContain(">Comment</button>");
     expect(markup).toContain("autofocus");
-    const textareaControl = markup.match(/<span[^>]*data-slot="textarea-control"[^>]*>/)?.[0];
-    expect(textareaControl).toBeDefined();
-    expect(textareaControl).not.toContain("ring-ring");
-    expect(markup).toContain("cursor-text");
+    // The comment box is the standard small Textarea, not a bespoke surface.
+    expect(markup).toMatch(/<span[^>]*data-size="sm"[^>]*data-slot="textarea-control"/);
   });
 
   it("lets a pull-request diff configure actions without replacing the composer", () => {
diff --git a/apps/web/src/components/diffs/DiffCommentAnnotation.tsx b/apps/web/src/components/diffs/DiffCommentAnnotation.tsx
index 6633a593067efff72091946c482cda9fe9bbe8d1..adbe5b20cefcab1e2b77bca74c54a6ad2c6821a9 100644
--- a/apps/web/src/components/diffs/DiffCommentAnnotation.tsx
+++ b/apps/web/src/components/diffs/DiffCommentAnnotation.tsx
@@ -91,8 +91,6 @@ export function DiffCommentAnnotation({
       <Textarea
         ref={textareaRef}
         autoFocus={focusOnMount}
-        unstyled
-        className="relative inline-flex w-full rounded-md border border-border/50 bg-background/20 font-sans text-foreground transition-colors focus-within:border-border/70 [&_[data-slot=textarea]]:min-h-12 [&_[data-slot=textarea]]:cursor-text [&_[data-slot=textarea]]:caret-foreground [&_[data-slot=textarea]]:px-2.5 [&_[data-slot=textarea]]:py-1.5 [&_[data-slot=textarea]]:font-sans [&_[data-slot=textarea]]:text-xs [&_[data-slot=textarea]]:leading-5 max-sm:[&_[data-slot=textarea]]:min-h-12"
         size="sm"
         value={displayedText}
         placeholder={placeholder}
diff --git a/apps/web/src/components/pullRequest/PullRequestCommentForm.tsx b/apps/web/src/components/pullRequest/PullRequestCommentForm.tsx
index fd7ebee57a1312794c39a3792f083c80918ea5bd..39fd7470d13635e0aa6993490888e81fc11e8f4d 100644
--- a/apps/web/src/components/pullRequest/PullRequestCommentForm.tsx
+++ b/apps/web/src/components/pullRequest/PullRequestCommentForm.tsx
@@ -85,7 +85,6 @@ export function PullRequestCommentForm({
     <div className="space-y-2">
       <Textarea
         ref={textareaRef}
-        className="[&_textarea]:max-h-64"
         // Locked while posting: the body is cleared on success, which would otherwise throw
         // away a new draft typed while the request was still in flight.
         disabled={submitting !== null || actionPending}
diff --git a/apps/web/src/components/pullRequest/PullRequestReviewForm.tsx b/apps/web/src/components/pullRequest/PullRequestReviewForm.tsx
index 68182eda7574e4c2f87cd01a39210690b47860b5..f4f9ed18381bb02fc63045910c6de3f2c4f72229 100644
--- a/apps/web/src/components/pullRequest/PullRequestReviewForm.tsx
+++ b/apps/web/src/components/pullRequest/PullRequestReviewForm.tsx
@@ -126,7 +126,6 @@ export function PullRequestReviewForm({
       <Textarea
         ref={textareaRef}
         rows={3}
-        className="[&_textarea]:max-h-64"
         value={body}
         placeholder={
           requestChangesSummaryRequired && verdicts.includes("request-changes")
diff --git a/apps/web/src/components/ui/textarea.tsx b/apps/web/src/components/ui/textarea.tsx
index 586ae8e4430aa38110895e60169cd2bc0006d795..ad19b187a435ce21fc9a707b3e378e182cfcf399 100644
--- a/apps/web/src/components/ui/textarea.tsx
+++ b/apps/web/src/components/ui/textarea.tsx
@@ -28,7 +28,8 @@ function Textarea({ className, size = "default", unstyled = false, ...props }: T
         render={(defaultProps) => (
           <textarea
             className={cn(
-              "field-sizing-content min-h-17.5 w-full rounded-[inherit] px-[calc(--spacing(3)-1px)] py-[calc(--spacing(1.5)-1px)] outline-none max-sm:min-h-20.5",
+              // Auto-grows with content up to one cap, then scrolls.
+              "field-sizing-content min-h-17.5 max-h-64 w-full rounded-[inherit] px-[calc(--spacing(3)-1px)] py-[calc(--spacing(1.5)-1px)] outline-none max-sm:min-h-20.5",
               size === "sm" &&
                 "min-h-16.5 px-[calc(--spacing(2.5)-1px)] py-[calc(--spacing(1)-1px)] max-sm:min-h-19.5",
               size === "lg" && "min-h-18.5 py-[calc(--spacing(2)-1px)] max-sm:min-h-21.5",
diff --git a/scripts/lint-restyle-ceiling.ts b/scripts/lint-restyle-ceiling.ts
index c38ba06dcae0f9e89f7c51e0079e1c9550b85f4a..0ad185333097a1c0ff69ebdb87fb48e1032606b8 100644
--- a/scripts/lint-restyle-ceiling.ts
+++ b/scripts/lint-restyle-ceiling.ts
@@ -8,7 +8,7 @@ import * as NodeURL from "node:url";
 // components/ui exports are migrated to variants (see vite.config.ts). This gate keeps the
 // count from growing: CI fails when findings exceed the ceiling. Lower the ceiling when you
 // migrate a file, and delete this script when the rule becomes an error.
-export const RESTYLE_CEILING = 826;
+export const RESTYLE_CEILING = 812;
 
 const RULE = "shadcn(no-restyle)";
 
-- 
2.54.0