From 801ef935224190bb1165b6754b43b1304cf8a3a4 Mon Sep 17 00:00:00 2001
From: Aleksander Grygier <aleksander.grygier@gmail.com>
Date: Sat, 24 Jan 2026 19:15:38 +0100
Subject: [PATCH] refactor: Message Height CSS Variable

---
 tools/server/webui/src/app.css                                  | 2 ++
 .../components/app/chat/ChatMessages/ChatMessageSystem.svelte   | 2 +-
 .../lib/components/app/chat/ChatMessages/ChatMessageUser.svelte | 2 +-
 .../app/chat/ChatMessages/CollapsibleContentBlock.svelte        | 2 +-
 .../webui/src/lib/components/app/misc/MarkdownContent.svelte    | 2 +-
 5 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/tools/server/webui/src/app.css b/tools/server/webui/src/app.css
index ecaae22857..311ffc033d 100644
--- a/tools/server/webui/src/app.css
+++ b/tools/server/webui/src/app.css
@@ -116,6 +116,8 @@
 	--color-sidebar-ring: var(--sidebar-ring);
 
 	--chat-form-area-height: 24rem;
+
+	--max-message-height: min(80dvh, calc(100dvh - var(--chat-form-area-height) - 12rem));
 }
 
 @layer base {
diff --git a/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageSystem.svelte b/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageSystem.svelte
index 5ccb3a1b27..abba74df94 100644
--- a/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageSystem.svelte
+++ b/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageSystem.svelte
@@ -134,7 +134,7 @@
 					<Card
 						class="overflow-y-auto rounded-[1.125rem] !border-2 !border-dashed !border-border/50 bg-muted px-3.75 py-1.5 data-[multiline]:py-2.5"
 						data-multiline={isMultiline ? '' : undefined}
-						style="border: 2px dashed hsl(var(--border)); max-height: calc(100dvh - var(--chat-form-area-height));"
+						style="border: 2px dashed hsl(var(--border)); max-height: var(--max-message-height);"
 					>
 						<div
 							class="relative transition-all duration-300 {isExpanded
diff --git a/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageUser.svelte b/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageUser.svelte
index 24979cf299..565fcef8fa 100644
--- a/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageUser.svelte
+++ b/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageUser.svelte
@@ -119,7 +119,7 @@
 			<Card
 				class="max-w-[80%] overflow-y-auto rounded-[1.125rem] border-none bg-primary/5 px-3.75 py-1.5 text-foreground backdrop-blur-md data-[multiline]:py-2.5 dark:bg-primary/15"
 				data-multiline={isMultiline ? '' : undefined}
-				style="max-height: calc(100dvh - var(--chat-form-area-height)); overflow-wrap: anywhere; word-break: break-word;"
+				style="max-height: var(--max-message-height); overflow-wrap: anywhere; word-break: break-word;"
 			>
 				{#if currentConfig.renderUserContentAsMarkdown}
 					<div bind:this={messageElement} class="text-md">
diff --git a/tools/server/webui/src/lib/components/app/chat/ChatMessages/CollapsibleContentBlock.svelte b/tools/server/webui/src/lib/components/app/chat/ChatMessages/CollapsibleContentBlock.svelte
index 21fddf83d2..2199b285e2 100644
--- a/tools/server/webui/src/lib/components/app/chat/ChatMessages/CollapsibleContentBlock.svelte
+++ b/tools/server/webui/src/lib/components/app/chat/ChatMessages/CollapsibleContentBlock.svelte
@@ -103,7 +103,7 @@
 				bind:this={contentContainer}
 				class="overflow-y-auto border-t border-muted px-3 pb-3"
 				onscroll={handleScroll}
-				style="max-height: calc(100dvh - var(--chat-form-area-height));"
+				style="max-height: var(--max-message-height);"
 			>
 				{@render children()}
 			</div>
diff --git a/tools/server/webui/src/lib/components/app/misc/MarkdownContent.svelte b/tools/server/webui/src/lib/components/app/misc/MarkdownContent.svelte
index 2c46330b52..1a7a593138 100644
--- a/tools/server/webui/src/lib/components/app/misc/MarkdownContent.svelte
+++ b/tools/server/webui/src/lib/components/app/misc/MarkdownContent.svelte
@@ -670,7 +670,7 @@
 		border: 1px solid color-mix(in oklch, var(--border) 30%, transparent);
 		background: var(--code-background);
 		box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-		max-height: calc(100dvh - var(--chat-form-area-height));
+		max-height: var(--max-message-height);
 	}
 
 	:global(.dark) div :global(.code-block-wrapper) {