fix height of assistance card

src/lib/components/chat/Assistant.svelte

@@ -6,6 +6,8 @@
 		type NodeProps,
 		useNodes,
 		useEdges,
+		useUpdateNodeInternals,
+		useSvelteFlow,
 		type Edge,
 		type Node
 	} from '@xyflow/svelte';
@@ -27,6 +29,8 @@
 	const nodeData = useNodesData(id);
 	const { update: updateNodes } = useNodes();
 	const { update: updateEdges } = useEdges();
+	const updateNodeInternals = useUpdateNodeInternals();
+	const { fitView } = useSvelteFlow();
 
 	let selectedModel = $derived((nodeData.current?.data.selectedModel as string) ?? '');
 	let messages = $derived((nodeData.current?.data.messages as ChatMessage[]) ?? []);
@@ -42,8 +46,8 @@
 				} as unknown as ChatMessage)
 			: null
 	);
-	let rowHeight = $derived((nodeData.current?.data.rowHeight as number) ?? null);
 	let containerRef: HTMLDivElement | null = $state(null);
+	let articleRef: HTMLElement | null = $state(null);
 	let selectedText = $state<string | null>(null);
 	let selectedTextPosition = $state<{ y: number } | null>(null);
 
@@ -113,14 +117,34 @@
 		updateEdges((currentEdges) => [...currentEdges, ...newEdges]);
 	}
 
+	let fitViewTimeout: ReturnType<typeof setTimeout>;
+
+	$effect(() => {
+		if (!articleRef) return;
+
+		const observer = new ResizeObserver(() => {
+			updateNodeInternals(id);
+			clearTimeout(fitViewTimeout);
+			fitViewTimeout = setTimeout(() => {
+				fitView({ duration: 300 });
+			}, 150);
+		});
+
+		observer.observe(articleRef);
+		return () => {
+			observer.disconnect();
+			clearTimeout(fitViewTimeout);
+		};
+	});
+
 	$effect(() => {
 		console.log(message);
 	});
 </script>
 
 <article
+	bind:this={articleRef}
 	class="group/assistant relative flex w-[calc(100dvw-2rem)] flex-col rounded-3xl border border-border bg-background p-5 shadow-lg/5 lg:w-[600px]"
-	style={rowHeight ? `min-height: ${rowHeight}px` : ''}
 >
 	<div class="nodrag pointer-events-auto flex flex-1 cursor-auto flex-col justify-between">
 		<div>

src/lib/components/chat/markdown/think/Blockquote.svelte

@@ -3,8 +3,6 @@
 	let { children }: { children?: Snippet } = $props();
 </script>
 
-<blockquote
-	class="my-2 border-l-2 border-muted-foreground/25 pl-2.5 text-muted-foreground/80 italic"
->
+<blockquote class="my-3 border-l-2 border-muted-foreground/30 pl-3 text-muted-foreground italic">
 	{@render children?.()}
 </blockquote>

src/lib/components/chat/markdown/think/Heading.svelte

@@ -5,19 +5,19 @@
 </script>
 
 {#if depth === 1}
-	<h1 class="mt-3 mb-1.5 text-sm font-semibold text-foreground first:mt-0">
+	<h1 class="mt-4 mb-2 text-2xl font-semibold text-foreground first:mt-0">
 		{@render children?.()}
 	</h1>
 {:else if depth === 2}
-	<h2 class="mt-2.5 mb-1 text-[13px] font-semibold text-foreground first:mt-0">
+	<h2 class="mt-3.5 mb-2 text-xl font-semibold text-foreground first:mt-0">
 		{@render children?.()}
 	</h2>
 {:else if depth === 3}
-	<h3 class="mt-2 mb-1 text-xs font-semibold text-foreground first:mt-0">
+	<h3 class="mt-3 mb-1.5 text-lg font-semibold text-foreground first:mt-0">
 		{@render children?.()}
 	</h3>
 {:else}
-	<h4 class="mt-1.5 mb-0.5 text-[11px] font-semibold text-foreground first:mt-0">
+	<h4 class="mt-2.5 mb-1 text-base font-semibold text-foreground first:mt-0">
 		{@render children?.()}
 	</h4>
 {/if}

src/lib/components/flow/FitViewOnResize.svelte

@@ -265,7 +265,6 @@
 		// ── Phase 2: assign positions top-down ──────────────────────────
 
 		const positions = new Map<string, { x: number; y: number }>();
-		const rowHeightMap = new Map<string, number>();
 
 		function placeSubtree(nodeId: string, allocX: number, y: number) {
 			const node = nodeMap.get(nodeId);
@@ -292,19 +291,7 @@
 					belowTotalW += extents.get(belowIds[i])!.width;
 				}
 
-				const rowHeight = Math.max(
-					...belowIds.map((id) => {
-						const n = nodeMap.get(id);
-						return n ? getMeasuredHeight(n) : DEFAULT_HEIGHT;
-					})
-				);
-				for (const cid of belowIds) {
-					if (nodeMap.get(cid)?.type === 'assistant') {
-						rowHeightMap.set(cid, rowHeight);
-					}
-				}
-
-				const childY = y + nodeH + V_SPACING;
+			const childY = y + nodeH + V_SPACING;
 				let childX = allocX + (blockAWidth - belowTotalW) / 2;
 
 				for (const cid of belowIds) {
@@ -362,9 +349,7 @@
 
 		return nodes.map((n) => {
 			const pos = positions.get(n.id) ?? { x: 0, y: 0 };
-			const data =
-				n.type === 'assistant' ? { ...n.data, rowHeight: rowHeightMap.get(n.id) } : n.data;
-			return { ...n, position: pos, data };
+			return { ...n, position: pos };
 		});
 	}