responsive card

src/lib/components/chat/Assistant.svelte

@@ -114,7 +114,7 @@
 </script>
 
 <article
-	class="group/assistant relative flex w-full flex-col rounded-3xl border border-border bg-background p-5 shadow-lg/5 lg:w-[600px]"
+	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">

src/lib/components/chat/User.svelte

@@ -159,7 +159,7 @@
 </script>
 
 <article
-	class="group/user relative z-10 w-full rounded-3xl border border-border bg-background p-5 shadow-lg/5 lg:w-[600px]"
+	class="group/user relative z-10 w-[calc(100dvw-2rem)] rounded-3xl border border-border bg-background p-5 shadow-lg/5 lg:w-[600px]"
 >
 	<div class="nodrag pointer-events-auto cursor-auto">
 		<header class="mb-3 flex items-center justify-between">

src/lib/components/flow/FitViewOnResize.svelte

@@ -8,7 +8,11 @@
 
 	let { initialNodes }: { initialNodes: Node[] } = $props();
 
-	const DEFAULT_WIDTH = breakpointsState.isMobile ? 300 : 600;
+	const DEFAULT_WIDTH = breakpointsState.isMobile
+		? typeof window !== 'undefined'
+			? window.innerWidth - 32
+			: 390
+		: 600;
 	const DEFAULT_HEIGHT = 100;
 	const H_SPACING = 60;
 	const V_SPACING = 60;
@@ -71,7 +75,7 @@
 		fitView({
 			maxZoom: breakpointsState.isMobile ? 1 : 1.15,
 			minZoom: 0.7,
-			padding: 0.15,
+			padding: breakpointsState.isMobile ? 0 : 0.15,
 			...(shouldAnimate ? { interpolate: 'smooth' as const, duration: 250 } : {}),
 			nodes: nodes.map((n) => ({ id: n.id }))
 		});