From 14398ab62847c1840a9413efa0a34cf12df89dad Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Thu, 6 Feb 2025 01:28:33 -0800
Subject: [PATCH] refac: styling

---
 .../components/chat/Messages/Citations.svelte | 30 ++++++++++++-------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/lib/components/chat/Messages/Citations.svelte b/src/lib/components/chat/Messages/Citations.svelte
index b434b15db..232d8abb1 100644
--- a/src/lib/components/chat/Messages/Citations.svelte
+++ b/src/lib/components/chat/Messages/Citations.svelte
@@ -97,7 +97,7 @@
 {#if citations.length > 0}
 	<div class=" py-0.5 -mx-0.5 w-full flex gap-1 items-center flex-wrap">
 		{#if citations.length <= 3}
-			<div class="flex text-xs font-medium">
+			<div class="flex text-xs font-medium flex-wrap">
 				{#each citations as citation, idx}
 					<button
 						id={`source-${citation.source.name}`}
@@ -113,7 +113,7 @@
 							</div>
 						{/if}
 						<div
-							class="flex-1 mx-1 line-clamp-1 text-black/60 hover:text-black dark:text-white/60 dark:hover:text-white transition"
+							class="flex-1 mx-1 truncate text-black/60 hover:text-black dark:text-white/60 dark:hover:text-white transition"
 						>
 							{citation.source.name}
 						</div>
@@ -121,13 +121,21 @@
 				{/each}
 			</div>
 		{:else}
-			<Collapsible bind:open={isCollapsibleOpen} className="w-full">
+			<Collapsible
+				bind:open={isCollapsibleOpen}
+				className="w-full max-w-full "
+				buttonClassName="w-fit max-w-full"
+			>
 				<div
-					class="flex items-center gap-2 text-gray-500 hover:text-gray-600 dark:hover:text-gray-400 transition cursor-pointer"
+					class="flex w-full overflow-auto items-center gap-2 text-gray-500 hover:text-gray-600 dark:hover:text-gray-400 transition cursor-pointer"
 				>
-					<div class="flex-grow flex items-center gap-1 overflow-hidden">
-						<span class="whitespace-nowrap hidden sm:inline">{$i18n.t('References from')}</span>
-						<div class="flex items-center">
+					<div
+						class="flex-1 flex items-center gap-1 overflow-auto scrollbar-none w-full max-w-full"
+					>
+						<span class="whitespace-nowrap hidden sm:inline flex-shrink-0"
+							>{$i18n.t('References from')}</span
+						>
+						<div class="flex items-center overflow-auto scrollbar-none w-full max-w-full flex-1">
 							<div class="flex text-xs font-medium items-center">
 								{#each citations.slice(0, 2) as citation, idx}
 									<button
@@ -145,14 +153,14 @@
 												{idx + 1}
 											</div>
 										{/if}
-										<div class="flex-1 mx-1 line-clamp-1 truncate">
+										<div class="flex-1 mx-1 truncate">
 											{citation.source.name}
 										</div>
 									</button>
 								{/each}
 							</div>
 						</div>
-						<div class="flex items-center gap-1 whitespace-nowrap">
+						<div class="flex items-center gap-1 whitespace-nowrap flex-shrink-0">
 							<span class="hidden sm:inline">{$i18n.t('and')}</span>
 							{citations.length - 2}
 							<span>{$i18n.t('more')}</span>
@@ -167,7 +175,7 @@
 					</div>
 				</div>
 				<div slot="content">
-					<div class="flex text-xs font-medium">
+					<div class="flex text-xs font-medium flex-wrap">
 						{#each citations as citation, idx}
 							<button
 								class="no-toggle outline-none flex dark:text-gray-300 p-1 bg-gray-50 hover:bg-gray-100 dark:bg-gray-900 dark:hover:bg-gray-850 transition rounded-xl max-w-96"
@@ -181,7 +189,7 @@
 										{idx + 1}
 									</div>
 								{/if}
-								<div class="flex-1 mx-1 line-clamp-1 truncate">
+								<div class="flex-1 mx-1 truncate">
 									{citation.source.name}
 								</div>
 							</button>