From 111719dd25fd1e9520ab4aa4012a491ca5825e06 Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Wed, 29 Jul 2026 23:56:35 +0200
Subject: [PATCH] web/components: keep the editor the same height in both tabs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

the preview pane had its own min-height (min-h-40, or min-h-24 from the comment
editor) while the write tab took the textarea's, so toggling tabs resized the
whole editor. the pane now takes the field's own height and inset from the
exported textareaMinHeight, which leaves nothing to drift, and previewClass —
which only existed to set that height — is gone.

measured on the editor and reply stories: both tabs render a 256px pane at the
same offset.

Signed-off-by: eti <eti@eti.tf>
---
 .../lib/components/comment/CommentEditor.svelte |  3 ---
 web/src/lib/components/ui/MarkdownEditor.svelte | 17 +++++++----------
 web/src/lib/components/ui/Textarea.svelte       |  6 +++++-
 3 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/web/src/lib/components/comment/CommentEditor.svelte b/web/src/lib/components/comment/CommentEditor.svelte
index e2a351dd..9d1d01db 100644
--- a/web/src/lib/components/comment/CommentEditor.svelte
+++ b/web/src/lib/components/comment/CommentEditor.svelte
@@ -28,7 +28,6 @@
 		markup: MarkupContext;
 		rows?: number;
 		placeholder?: string;
-		previewClass?: string;
 		submitLabel: string;
 		submitIcon: Component<SvelteHTMLElements["svg"]>;
 		autofocus?: boolean;
@@ -49,7 +48,6 @@
 		markup,
 		rows = 6,
 		placeholder,
-		previewClass = "min-h-24",
 		submitLabel,
 		submitIcon,
 		autofocus = false,
@@ -121,7 +119,6 @@
 	<MarkdownEditor
 		name="body"
 		{rows}
-		{previewClass}
 		{placeholder}
 		{markup}
 		{autofocus}
diff --git a/web/src/lib/components/ui/MarkdownEditor.svelte b/web/src/lib/components/ui/MarkdownEditor.svelte
index 75bafa25..d5eaeb06 100644
--- a/web/src/lib/components/ui/MarkdownEditor.svelte
+++ b/web/src/lib/components/ui/MarkdownEditor.svelte
@@ -4,7 +4,7 @@
 	import Pencil from "$icon/pencil";
 	import Button from "./Button.svelte";
 	import ButtonGroup, { segmentProps } from "./ButtonGroup.svelte";
-	import Textarea from "./Textarea.svelte";
+	import Textarea, { textareaMinHeight } from "./Textarea.svelte";
 	import { renderMarkup, type MarkupContext } from "$lib/markup";
 
 	interface Props {
@@ -16,7 +16,6 @@
 		rows?: number;
 		placeholder?: string;
 		disabled?: boolean;
-		previewClass?: string;
 		autofocus?: boolean;
 		// drop the textarea/preview background so the editor blends into its surroundings
 		transparent?: boolean;
@@ -31,12 +30,14 @@
 		rows = 12,
 		placeholder,
 		disabled = false,
-		previewClass = "min-h-40",
 		autofocus = false,
 		transparent = false
 	}: Props = $props();
 
 	const surface = $derived(transparent ? "bg-transparent" : "bg-background-default");
+	// the preview pane replaces the field in place, so it has to carry the field's own
+	// height and inset — otherwise the whole editor resizes every time you switch tabs.
+	const pane = `rounded border border-border-default px-2.5 py-2 ${textareaMinHeight}`;
 
 	let previewHtml = $state<string | null>(null);
 	let previewing = $state(false);
@@ -113,19 +114,15 @@
 			bind:element={textareaEl}
 			{disabled}
 			onkeydown={handleKeydown}
-			class={transparent ? "max-h-none bg-transparent" : "max-h-none"}
+			class={transparent ? "bg-transparent" : undefined}
 		/>
 	{:else if previewHtml}
-		<div
-			class={`markup rounded border border-border-default ${surface} px-2.5 py-2 ${previewClass}`}
-		>
+		<div class={`markup ${pane} ${surface}`}>
 			<!-- eslint-disable-next-line svelte/no-at-html-tags -- sanitised in $lib/markup -->
 			{@html previewHtml}
 		</div>
 	{:else}
-		<div
-			class={`rounded border border-border-default ${surface} px-2.5 py-2 text-sm text-foreground-subtle italic ${previewClass}`}
-		>
+		<div class={`${pane} ${surface} text-sm text-foreground-subtle italic`}>
 			{previewing ? "Rendering…" : "Nothing to preview."}
 		</div>
 	{/if}
diff --git a/web/src/lib/components/ui/Textarea.svelte b/web/src/lib/components/ui/Textarea.svelte
index 26f797cf..960a580b 100644
--- a/web/src/lib/components/ui/Textarea.svelte
+++ b/web/src/lib/components/ui/Textarea.svelte
@@ -1,9 +1,13 @@
 <script module lang="ts">
 	import { tv, type VariantProps } from "tailwind-variants";
 
+	// 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.
+	export const textareaMinHeight = "min-h-64";
+
 	export const textareaField = tv({
 		slots: {
-			root: "relative flex min-h-64 items-start gap-1 rounded border bg-background-default transition-colors",
+			root: `relative flex ${textareaMinHeight} items-start gap-1 rounded border bg-background-default transition-colors`,
 			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"
 		},
-- 
2.51.2