From c451faad8b2e17aa7e42ad2acee37040f03acdea Mon Sep 17 00:00:00 2001 From: Pascal Date: Wed, 4 Feb 2026 21:46:12 +0100 Subject: [PATCH] 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 | 6 +++++- .../chat/ChatMessages/ChatMessageMcpPromptContent.svelte | 4 +++- .../components/app/content/CollapsibleContentBlock.svelte | 2 +- .../src/lib/components/app/content/MarkdownContent.svelte | 2 ++ 4 files changed, 11 insertions(+), 3 deletions(-) diff --git a/tools/server/webui/src/app.css b/tools/server/webui/src/app.css index 48107049ab..b9f12de84a 100644 --- a/tools/server/webui/src/app.css +++ b/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 { 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 381d73159d..2906a48f76 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 @@ -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)); diff --git a/tools/server/webui/src/lib/components/app/content/CollapsibleContentBlock.svelte b/tools/server/webui/src/lib/components/app/content/CollapsibleContentBlock.svelte index 6f4529389f..082738da57 100644 --- a/tools/server/webui/src/lib/components/app/content/CollapsibleContentBlock.svelte +++ b/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()} diff --git a/tools/server/webui/src/lib/components/app/content/MarkdownContent.svelte b/tools/server/webui/src/lib/components/app/content/MarkdownContent.svelte index 62a0401091..b4db6034de 100644 --- a/tools/server/webui/src/lib/components/app/content/MarkdownContent.svelte +++ b/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;