diff --git a/tools/server/webui/src/lib/components/app/chat/ChatScreen/ChatScreen.svelte b/tools/server/webui/src/lib/components/app/chat/ChatScreen/ChatScreen.svelte
index 552101e3c9..1fb71658cf 100644
--- a/tools/server/webui/src/lib/components/app/chat/ChatScreen/ChatScreen.svelte
+++ b/tools/server/webui/src/lib/components/app/chat/ChatScreen/ChatScreen.svelte
@@ -15,7 +15,7 @@
 	} from '$lib/components/app';
 	import * as AlertDialog from '$lib/components/ui/alert-dialog';
 	import { config } from '$lib/stores/settings.svelte';
-	import { MAX_WIDTH_CLASSES, DEFAULT_MAX_WIDTH_CLASS } from '$lib/constants/width-classes';
+	import { getChatWidth } from '$lib/utils/chat-width';
 	import {
 		AUTO_SCROLL_AT_BOTTOM_THRESHOLD,
 		AUTO_SCROLL_INTERVAL,
@@ -87,9 +87,7 @@
 
 	let isCurrentConversationLoading = $derived(isLoading());
 
-	let maxWidthClass = $derived(
-		config().responsiveChatWidth ? MAX_WIDTH_CLASSES : DEFAULT_MAX_WIDTH_CLASS
-	);
+	let widthConfig = $derived(getChatWidth(config().autoChatWidth, config().customChatWidth));
 
 	async function handleDeleteConfirm() {
 		const conversation = activeConversation();
@@ -308,7 +306,10 @@
 			<ChatProcessingInfo />
 
 			{#if serverWarning()}
-				<ChatScreenWarning class="pointer-events-auto mx-auto {maxWidthClass} px-4" />
+				<ChatScreenWarning
+					class="pointer-events-auto mx-auto {widthConfig.class} px-4"
+					style={widthConfig.style}
+				/>
 			{/if}
 
 			<div class="conversation-chat-form pointer-events-auto rounded-t-3xl pb-4">
@@ -339,7 +340,7 @@
 		ondrop={handleDrop}
 		role="main"
 	>
-		<div class="w-full {maxWidthClass} px-4">
+		<div class="w-full {widthConfig.class} px-4" style={widthConfig.style}>
 			<div class="mb-8 text-center" in:fade={{ duration: 300 }}>
 				<h1 class="mb-2 text-3xl font-semibold tracking-tight">llama.cpp</h1>
 
diff --git a/tools/server/webui/src/lib/components/app/chat/ChatScreen/ChatScreenWarning.svelte b/tools/server/webui/src/lib/components/app/chat/ChatScreen/ChatScreenWarning.svelte
index 8b8d916889..dc316b45eb 100644
--- a/tools/server/webui/src/lib/components/app/chat/ChatScreen/ChatScreenWarning.svelte
+++ b/tools/server/webui/src/lib/components/app/chat/ChatScreen/ChatScreenWarning.svelte
@@ -5,16 +5,17 @@
 
 	interface Props {
 		class?: string;
+        style?: string;
 	}
 
-	let { class: className = '' }: Props = $props();
+	let { class: className = '', style = '' }: Props = $props();
 
 	function handleRefreshServer() {
 		serverStore.fetchServerProps();
 	}
 </script>
 
-<div class="mb-3 {className}" in:fly={{ y: 10, duration: 250 }}>
+<div class="mb-3 {className}" style={style} in:fly={{ y: 10, duration: 250 }}>
 	<div
 		class="rounded-md border border-yellow-200 bg-yellow-50 px-3 py-2 dark:border-yellow-800 dark:bg-yellow-950"
 	>