diff --git a/src/routes/(app)/chats/[chatId]/ChatMessage.svelte b/src/routes/(app)/chats/[chatId]/ChatMessage.svelte
index 72b7ee3..272b37e 100644
--- a/src/routes/(app)/chats/[chatId]/ChatMessage.svelte
+++ b/src/routes/(app)/chats/[chatId]/ChatMessage.svelte
@@ -15,9 +15,10 @@
 	<div class="relative flex-1">
 		<div
 			class="
-			  relative inline-block max-w-[50%] rounded-2xl bg-sb-primary px-3 py-2 shadow-sm ring-1 ring-ss-secondary
-				before:absolute before:-bottom-[2px] before:-start-5 before:z-0 before:box-content before:h-6 before:w-5 before:rounded-ee-[16px_12px] before:border-e-[10px] before:border-sb-primary before:text-ss-secondary before:drop-shadow-[-1px_0]
-				after:absolute after:-bottom-[2px] after:-start-5 after:-z-10 after:box-content after:h-6 after:w-5 after:rounded-ee-[16px_12px] after:border-e-[10px] after:text-ss-secondary after:drop-shadow-[0_1px]
+			  relative inline-block max-w-[85%] rounded-2xl bg-sb-primary px-3 py-2 shadow-sm ring-1 ring-ss-secondary before:absolute
+				before:-bottom-[2px] before:-start-5 before:z-0 before:box-content before:h-6 before:w-5 before:rounded-ee-[16px_12px] before:border-e-[10px] before:border-sb-primary before:text-ss-secondary before:drop-shadow-[-1px_0] after:absolute
+				after:-bottom-[2px] after:-start-5 after:-z-10 after:box-content after:h-6 after:w-5 after:rounded-ee-[16px_12px] after:border-e-[10px] after:text-ss-secondary after:drop-shadow-[0_1px]
+				sm:max-w-[70%] lg:max-w-[50%]
 			"
 		>
 			<RichTextRenderer content={message.content} class="z-10" />