Used the new getChatWidth function in all chat messages components that need it

tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessage.svelte

@@ -8,6 +8,7 @@
 
 	interface Props {
 		class?: string;
+		style?: string;
 		message: DatabaseMessage;
 		onCopy?: (message: DatabaseMessage) => void;
 		onDelete?: (message: DatabaseMessage) => void;
@@ -24,6 +25,7 @@
 
 	let {
 		class: className = '',
+		style,
 		message,
 		onCopy,
 		onDelete,
@@ -153,6 +155,7 @@
 	<ChatMessageUser
 		bind:textareaElement
 		class={className}
+		{style}
 		{deletionInfo}
 		{editedContent}
 		{isEditing}
@@ -174,6 +177,7 @@
 	<ChatMessageAssistant
 		bind:textareaElement
 		class={className}
+		{style}
 		{deletionInfo}
 		{editedContent}
 		{isEditing}

tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageAssistant.svelte

@@ -23,10 +23,10 @@
 	import { modelName as serverModelName } from '$lib/stores/server.svelte';
 	import { copyToClipboard } from '$lib/utils/copy';
 	import type { ApiChatCompletionToolCall } from '$lib/types/api';
-	import { MAX_WIDTH_CLASSES, DEFAULT_MAX_WIDTH_CLASS } from '$lib/constants/width-classes';
 
 	interface Props {
 		class?: string;
+		style?: string;
 		deletionInfo: {
 			totalCount: number;
 			userMessages: number;
@@ -59,6 +59,7 @@
 
 	let {
 		class: className = '',
+		style,
 		deletionInfo,
 		editedContent = '',
 		isEditing = false,
@@ -102,10 +103,6 @@
 		return serverModel;
 	});
 
-	let maxWidthClass = $derived(
-		config().responsiveChatWidth ? MAX_WIDTH_CLASSES : DEFAULT_MAX_WIDTH_CLASS
-	);
-
 	function handleCopyModel() {
 		const model = displayedModel();
 
@@ -167,6 +164,7 @@
 
 <div
 	class="text-md group w-full leading-7.5 {className}"
+	{style}
 	role="group"
 	aria-label="Assistant message with actions"
 >
@@ -179,7 +177,7 @@
 	{/if}
 
 	{#if message?.role === 'assistant' && isLoading() && !message?.content?.trim()}
-		<div class="mt-6 w-full {maxWidthClass}" in:fade>
+		<div class="mt-6 w-full {className}" {style} in:fade>
 			<div class="processing-container">
 				<span class="processing-text">
 					{processingState.getProcessingMessage()}
@@ -225,7 +223,7 @@
 		</div>
 	{:else if message.role === 'assistant'}
 		{#if config().disableReasoningFormat}
-			<pre class="raw-output {maxWidthClass}">{messageContent || ''}</pre>
+			<pre class="raw-output">{messageContent || ''}</pre>
 		{:else}
 			<MarkdownContent content={messageContent || ''} />
 		{/if}

tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageUser.svelte

@@ -9,6 +9,7 @@
 
 	interface Props {
 		class?: string;
+		style?: string;
 		message: DatabaseMessage;
 		isEditing: boolean;
 		editedContent: string;
@@ -35,6 +36,7 @@
 
 	let {
 		class: className = '',
+		style,
 		message,
 		isEditing,
 		editedContent,
@@ -86,6 +88,7 @@
 <div
 	aria-label="User message with actions"
 	class="group flex flex-col items-end gap-3 md:gap-2 {className}"
+	{style}
 	role="group"
 >
 	{#if isEditing}

tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessages.svelte

@@ -11,7 +11,7 @@
 	} from '$lib/stores/chat.svelte';
 	import { config } from '$lib/stores/settings.svelte';
 	import { getMessageSiblings } from '$lib/utils/branching';
-	import { MAX_WIDTH_CLASSES, DEFAULT_MAX_WIDTH_CLASS } from '$lib/constants/width-classes';
+	import { getChatWidth } from '$lib/utils/chat-width';
 
 	interface Props {
 		class?: string;
@@ -23,9 +23,7 @@
 
 	let allConversationMessages = $state<DatabaseMessage[]>([]);
 
-	let maxWidthClass = $derived(
-		config().responsiveChatWidth ? MAX_WIDTH_CLASSES : DEFAULT_MAX_WIDTH_CLASS
-	);
+	let widthConfig = $derived(getChatWidth(config().autoChatWidth, config().customChatWidth));
 
 	function refreshAllMessages() {
 		const conversation = activeConversation();
@@ -109,7 +107,8 @@
 <div class="flex h-full flex-col space-y-10 pt-16 md:pt-24 {className}" style="height: auto; ">
 	{#each displayMessages as { message, siblingInfo } (message.id)}
 		<ChatMessage
-			class="mx-auto w-full {maxWidthClass}"
+			class="mx-auto w-full {widthConfig.class}"
+			style={widthConfig.style}
 			{message}
 			{siblingInfo}
 			onDelete={handleDeleteMessage}