prose-sm on mobile

src/lib/components/chat/ChatMessage.svelte

@@ -69,7 +69,7 @@
 				<IconLoading classNames="absolute inset-0 m-auto" />
 			{/if}
 			<div
-				class="prose dark:prose-invert prose-pre:bg-gray-800 dark:prose-pre:bg-gray-900 prose-h1:text-lg prose-h2:text-base prose-h3:text-base prose-headings:font-semibold max-w-none"
+				class="prose max-sm:prose-sm dark:prose-invert prose-pre:bg-gray-800 dark:prose-pre:bg-gray-900 prose-h1:text-lg prose-h2:text-base prose-h3:text-base prose-headings:font-semibold max-w-none"
 				bind:this={contentEl}
 			>
 				{#each tokens as token}
@@ -84,7 +84,7 @@
 	</div>
 {/if}
 {#if message.from === "user"}
-	<div class="flex items-start justify-start gap-4">
+	<div class="flex items-start justify-start gap-4 max-sm:text-sm">
 		<div class="mt-5 w-3 h-3 flex-none rounded-full" />
 		<div class="rounded-2xl px-5 py-3.5 text-gray-500 dark:text-gray-400 whitespace-break-spaces">
 			{message.content.trim()}

src/lib/components/chat/ChatMessages.svelte

@@ -25,7 +25,7 @@
 </script>
 
 <div class="overflow-y-auto h-full" use:snapScrollToBottom={messages} bind:this={chatContainer}>
-	<div class="max-w-3xl xl:max-w-4xl mx-auto px-5 pt-6 flex flex-col gap-8 h-full">
+	<div class="max-w-3xl xl:max-w-4xl mx-auto px-5 pt-6 flex flex-col gap-5 sm:gap-8 h-full">
 		{#each messages as message, i}
 			<ChatMessage loading={loading && i === messages.length - 1} {message} />
 		{:else}