webui: improve when lacking vertical space on mobile with keyboard open

consider removing all nested scrolls from reasoning/toolcall and make a simple
timeline that opens entirely in one click?

tools/server/webui/src/app.css

@@ -117,7 +117,11 @@
 
 	--chat-form-area-height: 24rem;
 
-	--max-message-height: min(80dvh, calc(100dvh - var(--chat-form-area-height) - 12rem));
+	--min-message-height: 4.5rem;
+	--max-message-height: max(
+		var(--min-message-height),
+		min(80dvh, calc(100dvh - var(--chat-form-area-height) - 12rem))
+	);
 }
 
 @layer base {

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

@@ -81,7 +81,9 @@
 	let isAttachment = $derived(variant === McpPromptVariant.ATTACHMENT);
 	let textSizeClass = $derived(isAttachment ? 'text-sm' : 'text-md');
 	let maxHeightStyle = $derived(
-		isAttachment ? 'max-height: 10rem;' : 'max-height: var(--max-message-height);'
+		isAttachment
+			? 'max-height: 10rem;'
+			: 'min-height: var(--min-message-height); max-height: var(--max-message-height);'
 	);
 
 	const serverFavicon = $derived(mcpStore.getServerFavicon(prompt.serverName));

tools/server/webui/src/lib/components/app/content/CollapsibleContentBlock.svelte

@@ -88,7 +88,7 @@
 				bind:this={contentContainer}
 				class="overflow-y-auto border-t border-muted px-3 pb-3"
 				onscroll={handleScroll}
-				style="max-height: var(--max-message-height);"
+				style="min-height: var(--min-message-height); max-height: var(--max-message-height);"
 			>
 				{@render children()}
 			</div>

tools/server/webui/src/lib/components/app/content/MarkdownContent.svelte

@@ -887,6 +887,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);
+		min-height: var(--min-message-height);
 		max-height: var(--max-message-height);
 	}
 
@@ -897,6 +898,7 @@
 	/* Scroll container for code blocks (both streaming and completed) */
 	div :global(.code-block-scroll-container),
 	.streaming-code-scroll-container {
+		min-height: var(--min-message-height);
 		max-height: var(--max-message-height);
 		overflow-y: auto;
 		overflow-x: auto;