alice.pds.demo.boltless.dev
This repository has no description
web/components: keep the editor the same height in both tabs
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>
author
eti
committer
dawn
date
(Jul 30, 2026, 7:45 PM +0300)
commit
111719dd
111719dd25fd1e9520ab4aa4012a491ca5825e06
parent
e7d46737
e7d46737ab85e48e86c55cadb9f72593dbcce9d4
change-id
woouxlnp
woouxlnptrqknrwskzqmqlmvtnzkymyo
+12
-14
-3
web/src/lib/components/comment/CommentEditor.svelte
-3
web/src/lib/components/comment/CommentEditor.svelte
···
28
28
markup: MarkupContext;
29
29
rows?: number;
30
30
placeholder?: string;
31
-
previewClass?: string;
32
31
submitLabel: string;
33
32
submitIcon: Component<SvelteHTMLElements["svg"]>;
34
33
autofocus?: boolean;
···
49
48
markup,
50
49
rows = 6,
51
50
placeholder,
52
-
previewClass = "min-h-24",
53
51
submitLabel,
54
52
submitIcon,
55
53
autofocus = false,
···
121
119
<MarkdownEditor
122
120
name="body"
123
121
{rows}
124
-
{previewClass}
125
122
{placeholder}
126
123
{markup}
127
124
{autofocus}
+7
-10
web/src/lib/components/ui/MarkdownEditor.svelte
+7
-10
web/src/lib/components/ui/MarkdownEditor.svelte
···
4
4
import Pencil from "$icon/pencil";
5
5
import Button from "./Button.svelte";
6
6
import ButtonGroup, { segmentProps } from "./ButtonGroup.svelte";
7
-
import Textarea from "./Textarea.svelte";
7
+
import Textarea, { textareaMinHeight } from "./Textarea.svelte";
8
8
import { renderMarkup, type MarkupContext } from "$lib/markup";
9
9
10
10
interface Props {
···
16
16
rows?: number;
17
17
placeholder?: string;
18
18
disabled?: boolean;
19
-
previewClass?: string;
20
19
autofocus?: boolean;
21
20
// drop the textarea/preview background so the editor blends into its surroundings
22
21
transparent?: boolean;
···
31
30
rows = 12,
32
31
placeholder,
33
32
disabled = false,
34
-
previewClass = "min-h-40",
35
33
autofocus = false,
36
34
transparent = false
37
35
}: Props = $props();
38
36
39
37
const surface = $derived(transparent ? "bg-transparent" : "bg-background-default");
38
+
// the preview pane replaces the field in place, so it has to carry the field's own
39
+
// height and inset — otherwise the whole editor resizes every time you switch tabs.
40
+
const pane = `rounded border border-border-default px-2.5 py-2 ${textareaMinHeight}`;
40
41
41
42
let previewHtml = $state<string | null>(null);
42
43
let previewing = $state(false);
···
113
114
bind:element={textareaEl}
114
115
{disabled}
115
116
onkeydown={handleKeydown}
116
-
class={transparent ? "max-h-none bg-transparent" : "max-h-none"}
117
+
class={transparent ? "bg-transparent" : undefined}
117
118
/>
118
119
{:else if previewHtml}
119
-
<div
120
-
class={`markup rounded border border-border-default ${surface} px-2.5 py-2 ${previewClass}`}
121
-
>
120
+
<div class={`markup ${pane} ${surface}`}>
122
121
<!-- eslint-disable-next-line svelte/no-at-html-tags -- sanitised in $lib/markup -->
123
122
{@html previewHtml}
124
123
</div>
125
124
{:else}
126
-
<div
127
-
class={`rounded border border-border-default ${surface} px-2.5 py-2 text-sm text-foreground-subtle italic ${previewClass}`}
128
-
>
125
+
<div class={`${pane} ${surface} text-sm text-foreground-subtle italic`}>
129
126
{previewing ? "Rendering…" : "Nothing to preview."}
130
127
</div>
131
128
{/if}
+5
-1
web/src/lib/components/ui/Textarea.svelte
+5
-1
web/src/lib/components/ui/Textarea.svelte
···
1
1
<script module lang="ts">
2
2
import { tv, type VariantProps } from "tailwind-variants";
3
3
4
+
// exported so anything that swaps itself in for the field — MarkdownEditor's preview pane —
5
+
// can match its height and avoid resizing the box as you toggle between them.
6
+
export const textareaMinHeight = "min-h-64";
7
+
4
8
export const textareaField = tv({
5
9
slots: {
6
-
root: "relative flex min-h-64 items-start gap-1 rounded border bg-background-default transition-colors",
10
+
root: `relative flex ${textareaMinHeight} items-start gap-1 rounded border bg-background-default transition-colors`,
7
11
textarea:
8
12
"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"
9
13
},