Commit 2b57148b0 for llama.cpp

commit 2b57148b08beeb3721b68ca9fd8438f295462b56
Author: Aleksander Grygier <aleksander.grygier@gmail.com>
Date:   Mon Oct 19 08:28:16 2026 +0200

    ui: Fix markdown tables and lists being cut off on phones (#30687)

    * ui : keep markdown tables inside the chat column on phones

    The phone rule made the table wrapper full-bleed with -1rem margins, so the
    first and the last column sat under the screen edge. Keep the wrapper inside the
    chat column and cap it at its width, so a wide table scrolls in place instead.

    Assisted-by: llama-ui (ggml-org/Qwen3.8-Flash-Next:IQ4_NL)

    * test : show a table-only model answer in the chat message story

    Adds a story with an answer that is mostly a table, so the table layout can be
    checked at a phone width.

    Assisted-by: llama-ui (ggml-org/Qwen3.8-Flash-Next:IQ4_NL)

    * ui : indent markdown lists by 2rem

    1.5rem put the marker too close to the item text.

    Assisted-by: llama-ui (ggml-org/Qwen3.8-Flash-Next:IQ4_NL)

diff --git a/tools/ui/src/lib/components/app/content/MarkdownContent/markdown-content.css b/tools/ui/src/lib/components/app/content/MarkdownContent/markdown-content.css
index b0ca884ae..0f1560398 100644
--- a/tools/ui/src/lib/components/app/content/MarkdownContent/markdown-content.css
+++ b/tools/ui/src/lib/components/app/content/MarkdownContent/markdown-content.css
@@ -139,13 +139,13 @@
 /* Lists */
 .markdown-content :global(ul) {
 	list-style-type: disc;
-	margin-inline-start: 1.5rem;
+	margin-inline-start: 2rem;
 	margin-bottom: 1rem;
 }

 .markdown-content :global(ol) {
 	list-style-type: decimal;
-	margin-inline-start: 1.5rem;
+	margin-inline-start: 2rem;
 	margin-bottom: 1rem;
 }

@@ -500,6 +500,8 @@ div.markdown-user-content :global(.table-wrapper) {
 	margin: 1.5rem 0;
 	border-radius: 0.5rem;
 	border: 1px solid var(--border);
+	/* a wide table scrolls here, it does not widen the column */
+	max-width: 100%;
 }

 .markdown-content :global(.table-wrapper table) {
@@ -530,11 +532,9 @@ div.markdown-user-content :global(.table-wrapper) {
 		padding: 0.375rem 0.5rem;
 	}

+	/* no full-bleed: it hid the outer columns */
 	.markdown-content :global(.table-wrapper) {
-		margin: 0.5rem -1rem;
-		border-radius: 0;
-		border-left: none;
-		border-right: none;
+		margin: 1rem 0;
 	}
 }

diff --git a/tools/ui/tests/stories/ChatMessage.stories.svelte b/tools/ui/tests/stories/ChatMessage.stories.svelte
index 270813eb3..a8f0243f9 100644
--- a/tools/ui/tests/stories/ChatMessage.stories.svelte
+++ b/tools/ui/tests/stories/ChatMessage.stories.svelte
@@ -1,4 +1,5 @@
 <script lang="ts" module>
+	import { JOKES_TABLE_MD, WIDE_CELL_TABLE_MD } from './fixtures/mobile-tables.js';
 	import { defineMeta } from '@storybook/addon-svelte-csf';
 	import ChatMessage from '$lib/components/app/chat/ChatMessages/ChatMessage/ChatMessage.svelte';
 	import type { ChatMessageActions } from '$lib/types';
@@ -49,6 +50,18 @@
 		type: 'message'
 	};

+	const assistantWithTable: DatabaseMessage = {
+		children: [],
+		content: `${JOKES_TABLE_MD}\n\n${WIDE_CELL_TABLE_MD}`,
+		convId: 'conv-1',
+		id: '7',
+		parent: '1',
+		role: 'assistant',
+		thinking: '',
+		timestamp: Date.now() - 1000 * 60 * 3,
+		type: 'message'
+	};
+
 	const assistantWithReasoning: DatabaseMessage = {
 		children: [],
 		content: "Here's the concise answer, now that I've thought it through carefully for you.",
@@ -124,6 +137,19 @@
 	}}
 />

+<Story
+	args={{
+		class: 'max-w-[56rem] w-[calc(100vw-2rem)]',
+		message: assistantWithTable
+	}}
+	name="AssistantWithTable"
+	play={async () => {
+		const { settingsStore } = await import('$lib/stores/settings/index.svelte');
+
+		settingsStore.updateConfig('showRawOutputSwitch', false);
+	}}
+/>
+
 <Story
 	args={{
 		class: 'max-w-[56rem] w-[calc(100vw-2rem)]',
diff --git a/tools/ui/tests/stories/fixtures/mobile-tables.ts b/tools/ui/tests/stories/fixtures/mobile-tables.ts
new file mode 100644
index 000000000..3e9cc3231
--- /dev/null
+++ b/tools/ui/tests/stories/fixtures/mobile-tables.ts
@@ -0,0 +1,27 @@
+// Table-heavy answers, to check the table layout at a phone width.
+export const JOKES_TABLE_MD = String.raw`
+Sure! Here are the jokes in a table:
+
+| No. | Joke |
+|-----|------|
+| 1 | Why don't scientists trust atoms? Because they make up everything. |
+| 2 | I told my wife she was drawing her eyebrows too high. She looked surprised. |
+| 3 | Why did the scarecrow win an award? Because he was outstanding in his field. |
+| 4 | I'm reading a book about anti-gravity. It's impossible to put down. |
+| 5 | Why don't skeletons fight each other? They don't have the guts. |
+| 6 | I used to hate clowns, but they all have their fat-sies. |
+| 7 | What do you call a fake noodle? An impasta. |
+| 8 | Why did the bicycle fall over? Because it was two-tired. |
+| 9 | I would tell you a chemistry joke, but I know I wouldn't get a reaction. |
+| 10 | Why did the golfer bring two pairs of pants? In case he got a hole in one. |
+`;
+
+export const WIDE_CELL_TABLE_MD = String.raw`
+Some endpoints, in a table, for reference:
+
+| Name | Endpoint | Description |
+|------|----------|-------------|
+| Completions | https://huggingface.co/api/models/ggml-org/gpt-oss-20b-GGUF/summary | Long endpoint description |
+| Models | ./v1/models | Lists the models loaded in the server slot |
+| Props | ./props | Server capabilities and default sampling |
+`;