From cae7ad8c70997e6280603b064b688430268bcaae Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Sun, 14 Sep 2025 17:45:58 -0400
Subject: [PATCH] refac: styling

---
 .../ResponseMessage/StatusHistory.svelte      | 31 ++++++++++++-------
 1 file changed, 19 insertions(+), 12 deletions(-)

diff --git a/src/lib/components/chat/Messages/ResponseMessage/StatusHistory.svelte b/src/lib/components/chat/Messages/ResponseMessage/StatusHistory.svelte
index ea7f67f20d..22bc747650 100644
--- a/src/lib/components/chat/Messages/ResponseMessage/StatusHistory.svelte
+++ b/src/lib/components/chat/Messages/ResponseMessage/StatusHistory.svelte
@@ -32,19 +32,26 @@
 			{#if showHistory}
 				<div class="flex flex-row">
 					{#if history.length > 1}
-						<div class="w-1 border-r border-gray-100 dark:border-gray-800 mt-3 -mb-2.5" />
-
-						<div class="w-full -translate-x-[7.5px]">
+						<div class="w-full">
 							{#each history as status, idx}
 								{#if idx !== history.length - 1}
-									<div class="flex items-start gap-2 mb-1">
-										<div class="pt-3 px-1">
-											<span class="relative flex size-1.5 rounded-full justify-center items-center">
+									<div class="flex items-stretch gap-2 mb-1">
+										<div class=" ">
+											<div class="pt-3 px-1 mb-1.5">
 												<span
-													class="relative inline-flex size-1.5 rounded-full bg-gray-300 dark:bg-gray-600"
-												></span>
-											</span>
+													class="relative flex size-1.5 rounded-full justify-center items-center"
+												>
+													<span
+														class="relative inline-flex size-1.5 rounded-full bg-gray-500 dark:bg-gray-300"
+													></span>
+												</span>
+											</div>
+
+											<div
+												class="w-[0.5px] ml-[6.5px] h-[calc(100%-14px)] bg-gray-300 dark:bg-gray-700"
+											/>
 										</div>
+
 										<StatusItem {status} done={true} />
 									</div>
 								{/if}
@@ -55,7 +62,7 @@
 			{/if}
 
 			<button
-				class="w-full -translate-x-[3.5px]"
+				class="w-full"
 				on:click={() => {
 					showHistory = !showHistory;
 				}}
@@ -65,10 +72,10 @@
 						<span class="relative flex size-1.5 rounded-full justify-center items-center">
 							{#if status?.done === false}
 								<span
-									class="absolute inline-flex h-full w-full animate-ping rounded-full bg-gray-300 dark:bg-gray-600 opacity-75"
+									class="absolute inline-flex h-full w-full animate-ping rounded-full bg-gray-500 dark:bg-gray-300 opacity-75"
 								></span>
 							{/if}
-							<span class="relative inline-flex size-1.5 rounded-full bg-gray-300 dark:bg-gray-600"
+							<span class="relative inline-flex size-1.5 rounded-full bg-gray-500 dark:bg-gray-300"
 							></span>
 						</span>
 					</div>