From eb6f8b75030e2191c032eb5c5f552b73764e31fe Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Thu, 30 Jul 2026 12:48:50 +0200
Subject: [PATCH] web/components: clamp Textarea's resize handle to its min
 height
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

min-h-64 was on the wrapper div, but the native resize handle only ever
resizes the textarea itself, so dragging down shrank the textarea to its own
min-h-24 (96px) while the wrapper stayed at 256px — the handle detached from
the bottom border and left ~160px of dead space inside the field.

the floor now lives on the textarea, two pixels short of 16rem so the
wrapper's border keeps the outer box at exactly the exported
textareaMinHeight. rows can't do this job: it sets the resting height, not a
limit, so the handle drags straight past it.

measured in storybook with a real pointer drag on the handle: the textarea
clamps at 254px inside a 256px wrapper, matching MarkdownEditor's preview
pane, and growing upward is unaffected.

Signed-off-by: eti <eti@eti.tf>
---
 web/src/lib/components/ui/Textarea.svelte | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/web/src/lib/components/ui/Textarea.svelte b/web/src/lib/components/ui/Textarea.svelte
index 0e007aff..8b35afea 100644
--- a/web/src/lib/components/ui/Textarea.svelte
+++ b/web/src/lib/components/ui/Textarea.svelte
@@ -1,15 +1,20 @@
 <script module lang="ts">
 	import { tv, type VariantProps } from "$lib/tv";
 
-	// exported so anything that swaps itself in for the field — MarkdownEditor's preview pane —
-	// can match its height and avoid resizing the box as you toggle between them.
+	// the field's resting height, exported so anything that swaps itself in for the field —
+	// MarkdownEditor's preview pane — can match it and avoid resizing the box as you toggle
+	// between them.
 	export const textareaMinHeight = "min-h-64";
 
 	export const textareaField = tv({
 		slots: {
-			root: `relative flex ${textareaMinHeight} items-start gap-1 rounded border bg-background-default transition-colors`,
+			root: "relative flex items-start gap-1 rounded border bg-background-default transition-colors",
+			// the floor has to live on the textarea, not the root: the resize handle only ever
+			// shrinks the textarea, so a min-height on the root would let the handle drag past the
+			// box's own minimum and leave dead space under the field. keep this in sync with
+			// textareaMinHeight above — it's 2px shorter because the root's border sits outside it.
 			textarea:
-				"min-h-24 flex-1 self-stretch bg-transparent py-2 text-sm leading-6 outline-none placeholder:text-foreground-placeholder read-only:resize-none disabled:cursor-not-allowed disabled:resize-none"
+				"min-h-[calc(16rem-2px)] flex-1 self-stretch bg-transparent py-2 text-sm leading-6 outline-none placeholder:text-foreground-placeholder read-only:resize-none disabled:cursor-not-allowed disabled:resize-none"
 		},
 		variants: {
 			error: {
-- 
2.51.2