diff --git a/CHANGELOG.md b/CHANGELOG.md index 7815ad7c7..88621ab19 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] +### Changed + +- **A review comment's box grows with the comment.** Every field review prose is + typed into — the line comment, the batch note for the session, the reply, the + summary above a review — was a fixed three lines tall, so anything longer than a + sentence had to be dragged open before the first line was finished. The box now + grows as it is filled, up to a much taller ceiling, then scrolls; the drag + handle still overrides it in either direction. + ### Fixed - **Windows: the app list and the file picker wear the current icon.** The icon diff --git a/frontend/src/components/diff/ReviewSlots.tsx b/frontend/src/components/diff/ReviewSlots.tsx index 9097a6f7b..050affdcf 100644 --- a/frontend/src/components/diff/ReviewSlots.tsx +++ b/frontend/src/components/diff/ReviewSlots.tsx @@ -91,7 +91,6 @@ export function ReviewSlot({ } autoFocus submitOnEnter={session} - rows={session ? 2 : 3} /> ) diff --git a/frontend/src/components/pulls/CommentBox.tsx b/frontend/src/components/pulls/CommentBox.tsx index c7c40398f..6889b8792 100644 --- a/frontend/src/components/pulls/CommentBox.tsx +++ b/frontend/src/components/pulls/CommentBox.tsx @@ -5,8 +5,12 @@ import { cn } from "@/lib/utils" * submit dialog writes the review's summary into a bare textarea — it carries * the dialog's own footer instead of this box's buttons — and the two fields * drifting apart would read as two different controls for the same thing. */ +// The box grows with what is typed instead of holding one fixed height: a review +// comment is prose of unknown length, and a field that needs dragging open on the +// first line taxes every comment. `field-sizing: content` makes `rows` inert, so +// the floor and the ceiling are the min/max height — past the ceiling it scrolls. export const commentFieldClass = - "w-full resize-y rounded-md border border-input bg-transparent px-2.5 py-1.5 font-sans text-sm shadow-xs outline-none transition-[color,box-shadow] placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 dark:bg-input/30" + "max-h-64 min-h-16 w-full resize-y rounded-md border border-input bg-transparent px-2.5 py-1.5 font-sans text-sm shadow-xs outline-none transition-[color,box-shadow] field-sizing-content placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 dark:bg-input/30" interface CommentBoxProps { value: string @@ -19,7 +23,6 @@ interface CommentBoxProps { busy?: boolean placeholder?: string autoFocus?: boolean - rows?: number className?: string /** Send on a bare ⏎, with ⇧⏎ for a new line. For a one-line note taken while * reading — a comment for the session — where reaching for a modifier is the @@ -44,7 +47,6 @@ export function CommentBox({ busy = false, placeholder, autoFocus = false, - rows = 3, className, submitOnEnter = false, }: CommentBoxProps) { @@ -68,7 +70,6 @@ export function CommentBox({ onCancel() } }} - rows={rows} placeholder={placeholder} // biome-ignore lint/a11y/noAutofocus: the box only exists because the reviewer just asked for it — typing is the next thing they do. autoFocus={autoFocus} diff --git a/frontend/src/components/pulls/SubmitReviewDialog.tsx b/frontend/src/components/pulls/SubmitReviewDialog.tsx index 2cb23cfd4..c3feebe44 100644 --- a/frontend/src/components/pulls/SubmitReviewDialog.tsx +++ b/frontend/src/components/pulls/SubmitReviewDialog.tsx @@ -69,7 +69,6 @@ export function SubmitReviewDialog({