style: reduce spacing between thinking block and prose on mobile

- Add mobile-specific margin/padding reductions to BlockWrapper
- Reset first-child margin in prose div after thinking blocks
- Use max-sm variants to tighten spacing on small screens

https://claude.ai/code/session_014uDue4fXGx4p1MLUDzufvu

Author: claude

src/lib/components/chat/BlockWrapper.svelte

@@ -20,7 +20,9 @@
 	}: Props = $props();
 </script>
 
-<div class="group flex gap-2 has-[+.prose]:mb-1.5 [.prose+&]:mt-3">
+<div
+	class="group flex gap-2 has-[+.prose]:mb-1.5 has-[+.prose]:max-sm:mb-0.5 [.prose+&]:mt-3 [.prose+&]:max-sm:mt-1"
+>
 	<!-- Left column: icon + connector line -->
 	<div class="flex w-[22px] flex-shrink-0 flex-col items-center">
 		<div
@@ -53,7 +55,7 @@
 	</div>
 
 	<!-- Right column: content -->
-	<div class="min-w-0 flex-1 pb-2 pt-px">
+	<div class="min-w-0 flex-1 pb-2 pt-px max-sm:pb-1">
 		{@render children()}
 	</div>
 </div>

src/lib/components/chat/ChatMessage.svelte

@@ -304,7 +304,7 @@
 									/>
 								{:else if part && part.trim().length > 0}
 									<div
-										class="prose max-w-none dark:prose-invert max-sm:prose-sm prose-headings:font-semibold prose-h1:text-lg prose-h2:text-base prose-h3:text-base prose-pre:bg-gray-800 prose-img:my-0 prose-img:cursor-pointer prose-img:rounded-lg dark:prose-pre:bg-gray-900"
+										class="prose max-w-none dark:prose-invert max-sm:prose-sm prose-headings:font-semibold prose-h1:text-lg prose-h2:text-base prose-h3:text-base prose-pre:bg-gray-800 prose-img:my-0 prose-img:cursor-pointer prose-img:rounded-lg dark:prose-pre:bg-gray-900 [&>:first-child]:mt-0"
 									>
 										<MarkdownRenderer content={part} loading={isLast && loading} />
 									</div>