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"
 		},