From 07fafe081bd13fc64cff5daabbeb67360caa087c Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Wed, 15 Jul 2026 23:34:45 -0400
Subject: [PATCH] refac

---
 .../Messages/Markdown/ConsecutiveDetailsGroup.svelte  |  4 ++--
 .../chat/Messages/Markdown/MarkdownTokens.svelte      | 11 +++++++----
 .../chat/Messages/StructuredOutputRenderer.svelte     | 11 +++++++----
 3 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/lib/components/chat/Messages/Markdown/ConsecutiveDetailsGroup.svelte b/src/lib/components/chat/Messages/Markdown/ConsecutiveDetailsGroup.svelte
index dbd737b236..fbc42f8b78 100644
--- a/src/lib/components/chat/Messages/Markdown/ConsecutiveDetailsGroup.svelte
+++ b/src/lib/components/chat/Messages/Markdown/ConsecutiveDetailsGroup.svelte
@@ -112,7 +112,7 @@
 <div {id} class="w-full">
 	<!-- svelte-ignore a11y-no-static-element-interactions -->
 	<button
-		class="w-fit py-1 text-left text-[0.9375rem] text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition cursor-pointer"
+		class="w-fit py-0.5 text-left text-[0.9375rem] text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition cursor-pointer"
 		aria-label={$i18n.t('Toggle details')}
 		aria-expanded={open}
 		on:click={() => {
@@ -158,7 +158,7 @@
 
 	{#if open}
 		<div transition:slide={{ duration: 300, easing: quintOut, axis: 'y' }}>
-			<div class="mb-1 space-y-1.5">
+			<div class="mb-1">
 				<slot name="content" />
 			</div>
 		</div>
diff --git a/src/lib/components/chat/Messages/Markdown/MarkdownTokens.svelte b/src/lib/components/chat/Messages/Markdown/MarkdownTokens.svelte
index 1694cb7427..ac487cec25 100644
--- a/src/lib/components/chat/Messages/Markdown/MarkdownTokens.svelte
+++ b/src/lib/components/chat/Messages/Markdown/MarkdownTokens.svelte
@@ -377,7 +377,7 @@
 			messageDone={done}
 			{allowEmbeds}
 		>
-			<div slot="content" class="space-y-1">
+			<div slot="content">
 				{#each token.items as detailToken, detailIdx}
 					{@const textContent = getDetailTextContent(detailToken)}
 
@@ -388,7 +388,8 @@
 							resultContent={getDetailTextContent(detailToken)}
 							grouped={true}
 							open={$settings?.expandDetails ?? false}
-							className="w-full space-y-2"
+							className="w-full"
+							buttonClassName="w-fit py-0.5 text-[0.9375rem] text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition"
 						/>
 					{:else if textContent.length > 0}
 						<Collapsible
@@ -396,7 +397,8 @@
 							open={$settings?.expandDetails ?? false}
 							attributes={detailToken?.attributes}
 							messageDone={done}
-							className="w-full space-y-2"
+							className="w-full"
+							buttonClassName="w-fit py-0.5 text-[0.9375rem] text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition"
 							dir="auto"
 						>
 							<div class="mb-1.5" slot="content">
@@ -419,7 +421,8 @@
 							disabled={true}
 							attributes={detailToken?.attributes}
 							messageDone={done}
-							className="w-full space-y-2"
+							className="w-full"
+							buttonClassName="w-fit py-0.5 text-[0.9375rem] text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition"
 							dir="auto"
 						/>
 					{/if}
diff --git a/src/lib/components/chat/Messages/StructuredOutputRenderer.svelte b/src/lib/components/chat/Messages/StructuredOutputRenderer.svelte
index 3e7ca84faa..ae88360075 100644
--- a/src/lib/components/chat/Messages/StructuredOutputRenderer.svelte
+++ b/src/lib/components/chat/Messages/StructuredOutputRenderer.svelte
@@ -65,7 +65,7 @@
 			tokens={displayItem.tokens}
 			messageDone={done}
 		>
-			<div slot="content" class="space-y-2">
+			<div slot="content">
 				{#each displayItem.tokens as detailToken, detailIndex}
 					{#if detailToken.attributes?.type === 'tool_calls'}
 						<ToolCallDisplay
@@ -74,7 +74,8 @@
 							resultContent={detailToken.text}
 							grouped={true}
 							open={$settings?.expandDetails ?? false}
-							className="w-full space-y-2"
+							className="w-full"
+							buttonClassName="w-fit py-0.5 text-[0.9375rem] text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition"
 						/>
 					{:else if detailToken.text?.length > 0}
 						<Collapsible
@@ -82,7 +83,8 @@
 							open={$settings?.expandDetails ?? false}
 							attributes={getDetailAttributes(detailToken)}
 							messageDone={done}
-							className="w-full space-y-2"
+							className="w-full"
+							buttonClassName="w-fit py-0.5 text-[0.9375rem] text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition"
 						>
 							<div class="mb-1.5" slot="content">
 								<div class="markdown-prose">
@@ -102,7 +104,8 @@
 							disabled={true}
 							attributes={getDetailAttributes(detailToken)}
 							messageDone={done}
-							className="w-full space-y-2"
+							className="w-full"
+							buttonClassName="w-fit py-0.5 text-[0.9375rem] text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition"
 						/>
 					{/if}
 				{/each}