From 4d74e6cefa2df8c950bb307866c9e1b935c5f423 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Sun, 30 Nov 2025 05:01:41 -0500
Subject: [PATCH] refac: styling

---
 .../channel/Messages/Message.svelte           |  3 +-
 .../components/chat/Messages/CodeBlock.svelte |  2 +-
 .../Messages/Markdown/MarkdownTokens.svelte   | 33 +++++++++++++------
 3 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/src/lib/components/channel/Messages/Message.svelte b/src/lib/components/channel/Messages/Message.svelte
index deeed88bab..c4006296f2 100644
--- a/src/lib/components/channel/Messages/Message.svelte
+++ b/src/lib/components/channel/Messages/Message.svelte
@@ -388,8 +388,9 @@
 							<Markdown
 								id={message.id}
 								content={message.content}
+								paragraphTag="span"
 							/>{#if message.created_at !== message.updated_at && (message?.meta?.model_id ?? null) === null}<span
-									class="text-gray-500 text-[10px]">({$i18n.t('edited')})</span
+									class="text-gray-500 text-[10px] pl-1 self-center">({$i18n.t('edited')})</span
 								>{/if}
 						{/if}
 					</div>
diff --git a/src/lib/components/chat/Messages/CodeBlock.svelte b/src/lib/components/chat/Messages/CodeBlock.svelte
index 05b4d94a4e..c236671f5f 100644
--- a/src/lib/components/chat/Messages/CodeBlock.svelte
+++ b/src/lib/components/chat/Messages/CodeBlock.svelte
@@ -42,7 +42,7 @@
 	export let code = '';
 	export let attributes = {};
 
-	export let className = 'mb-2';
+	export let className = '';
 	export let editorClassName = '';
 	export let stickyButtonsClassName = 'top-0';
 
diff --git a/src/lib/components/chat/Messages/Markdown/MarkdownTokens.svelte b/src/lib/components/chat/Messages/Markdown/MarkdownTokens.svelte
index f1145f62a7..bf8ad99931 100644
--- a/src/lib/components/chat/Messages/Markdown/MarkdownTokens.svelte
+++ b/src/lib/components/chat/Messages/Markdown/MarkdownTokens.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { decode } from 'html-entities';
-	import DOMPurify from 'dompurify';
 	import { onMount, getContext } from 'svelte';
 	const i18n = getContext('i18n');
 
@@ -35,6 +34,8 @@
 	export let save = false;
 	export let preview = false;
 
+	export let paragraphTag = 'p';
+
 	export let editCodeBlock = true;
 	export let topPadding = false;
 
@@ -351,15 +352,27 @@
 			}}
 		></iframe>
 	{:else if token.type === 'paragraph'}
-		<p dir="auto">
-			<MarkdownInlineTokens
-				id={`${id}-${tokenIdx}-p`}
-				tokens={token.tokens ?? []}
-				{done}
-				{sourceIds}
-				{onSourceClick}
-			/>
-		</p>
+		{#if paragraphTag == 'span'}
+			<span dir="auto">
+				<MarkdownInlineTokens
+					id={`${id}-${tokenIdx}-p`}
+					tokens={token.tokens ?? []}
+					{done}
+					{sourceIds}
+					{onSourceClick}
+				/>
+			</span>
+		{:else}
+			<p dir="auto">
+				<MarkdownInlineTokens
+					id={`${id}-${tokenIdx}-p`}
+					tokens={token.tokens ?? []}
+					{done}
+					{sourceIds}
+					{onSourceClick}
+				/>
+			</p>
+		{/if}
 	{:else if token.type === 'text'}
 		{#if top}
 			<p>