happyz
/
llama.cpp
mirror of https://github.com/ggerganov/llama.cpp.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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?
This commit is contained in:
Pascal 2026-02-04 21:46:12 +01:00
parent bba8f64e0f
commit c451faad8b
4 changed files with 11 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
tools/server/webui/src/app.css
View File

@ -117,7 +117,11 @@
--chat-form-area-height: 24rem; --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 { @layer base {

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

@ -81,7 +81,9 @@
let isAttachment = $derived(variant === McpPromptVariant.ATTACHMENT); let isAttachment = $derived(variant === McpPromptVariant.ATTACHMENT);
let textSizeClass = $derived(isAttachment ? 'text-sm' : 'text-md'); let textSizeClass = $derived(isAttachment ? 'text-sm' : 'text-md');
let maxHeightStyle = $derived( 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)); const serverFavicon = $derived(mcpStore.getServerFavicon(prompt.serverName));

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

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

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

@ -887,6 +887,7 @@
border: 1px solid color-mix(in oklch, var(--border) 30%, transparent); border: 1px solid color-mix(in oklch, var(--border) 30%, transparent);
background: var(--code-background); background: var(--code-background);
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
min-height: var(--min-message-height);
max-height: var(--max-message-height); max-height: var(--max-message-height);
} }
@ -897,6 +898,7 @@
/* Scroll container for code blocks (both streaming and completed) */ /* Scroll container for code blocks (both streaming and completed) */
div :global(.code-block-scroll-container), div :global(.code-block-scroll-container),
.streaming-code-scroll-container { .streaming-code-scroll-container {
min-height: var(--min-message-height);
max-height: var(--max-message-height); max-height: var(--max-message-height);
overflow-y: auto; overflow-y: auto;
overflow-x: auto; overflow-x: auto;