From 315448b0bc1602b64dfef821d9eedbccc1171097 Mon Sep 17 00:00:00 2001
From: Aleksander Grygier <aleksander.grygier@gmail.com>
Date: Fri, 6 Feb 2026 04:03:06 +0100
Subject: [PATCH] fix: UI improvements

---
 tools/server/webui/src/app.css                | 19 ++++++++++++-------
 .../ChatMessageMcpPromptContent.svelte        |  2 +-
 .../app/chat/ChatMessages/ChatMessages.svelte |  2 +-
 3 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/tools/server/webui/src/app.css b/tools/server/webui/src/app.css
index b9f12de84a..4a26e19a50 100644
--- a/tools/server/webui/src/app.css
+++ b/tools/server/webui/src/app.css
@@ -114,14 +114,19 @@
 	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
 	--color-sidebar-border: var(--sidebar-border);
 	--color-sidebar-ring: var(--sidebar-ring);
+}
 
-	--chat-form-area-height: 24rem;
-
-	--min-message-height: 4.5rem;
-	--max-message-height: max(
-		var(--min-message-height),
-		min(80dvh, calc(100dvh - var(--chat-form-area-height) - 12rem))
-	);
+:root {
+	--chat-form-area-height: 8rem;
+	--chat-form-area-offset: 2rem;
+	--max-message-height: max(24rem, min(80dvh, calc(100dvh - var(--chat-form-area-height) - 12rem)));
+}
+	
+@media (min-width: 640px) {
+	:root{
+		--chat-form-area-height: 24rem;
+		--chat-form-area-offset: 12rem;
+}
 }
 
 @layer base {
diff --git a/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageMcpPromptContent.svelte b/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageMcpPromptContent.svelte
index c80e9e8307..f975830e2e 100644
--- a/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageMcpPromptContent.svelte
+++ b/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageMcpPromptContent.svelte
@@ -153,7 +153,7 @@
 		</Card>
 	{:else if isLoading}
 		<Card
-			class="relative overflow-hidden rounded-[1.125rem] border border-purple-200 bg-purple-500/10 backdrop-blur-md dark:border-purple-800 dark:bg-purple-500/20 py-2 px-1"
+			class="relative overflow-hidden rounded-[1.125rem] border border-purple-200 bg-purple-500/10 px-1 py-2 backdrop-blur-md dark:border-purple-800 dark:bg-purple-500/20"
 		>
 			<div
 				class="overflow-y-auto {paddingClass}"
diff --git a/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessages.svelte b/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessages.svelte
index 8e20c218fa..c00ee0d8c6 100644
--- a/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessages.svelte
+++ b/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessages.svelte
@@ -133,7 +133,7 @@
 	});
 </script>
 
-<div class="flex h-full flex-col space-y-10 pt-16 md:pt-24 {className}" style="height: auto; ">
+<div class="flex h-full flex-col space-y-10 pt-24 {className}" style="height: auto; ">
 	{#each displayMessages as { message, isLastAssistantMessage, siblingInfo } (message.id)}
 		<ChatMessage
 			class="mx-auto w-full max-w-[48rem]"