From 3a2e1f8a558e2cf5be379b26f7bbbf675781d358 Mon Sep 17 00:00:00 2001
From: pablodanswer <pablo@danswer.ai>
Date: Mon, 9 Dec 2024 18:53:45 -0800
Subject: [PATCH] improved display - no odd cutoffs

---
 .../chat_search/sources/SourceCard.tsx        | 28 +++++++++----------
 1 file changed, 13 insertions(+), 15 deletions(-)

diff --git a/web/src/components/chat_search/sources/SourceCard.tsx b/web/src/components/chat_search/sources/SourceCard.tsx
index cc4437b6c81..1c888228a83 100644
--- a/web/src/components/chat_search/sources/SourceCard.tsx
+++ b/web/src/components/chat_search/sources/SourceCard.tsx
@@ -57,29 +57,27 @@ export function SeeMoreBlock({
       onClick={toggleDocumentSelection}
       className={`
         ${documentSelectionToggled ? "border-border-100 border" : ""}
-        cursor-pointer w-[150px] rounded-sm flex-none transition-all duration-500 hover:bg-background-125 bg-text-100 px-3 py-2.5
+        cursor-pointer rounded-sm flex-none transition-all duration-500 hover:bg-background-125 bg-text-100 px-3 py-2.5
       `}
     >
-      <div className="line-clamp-1 font-semibold text-ellipsis text-text-900 flex h-6 items-center justify-between text-sm">
-        <p className="mr-0 flex-shrink-0">
+      <div className="flex h-6 items-center text-sm">
+        <p className="flex-1 mr-1 font-semibold text-text-900 overflow-hidden text-ellipsis whitespace-nowrap">
           {documentSelectionToggled ? "Hide sources" : "See context"}
         </p>
-        <div className="flex -space-x-3 flex-shrink-0 overflow-hidden">
-          {uniqueSources.map((sourceType, ind) => (
-            <div
-              key={ind}
-              className="inline-block bg-background-100 rounded-full p-0.5"
-              style={{ zIndex: uniqueSources.length - ind }}
-            >
-              <div className="bg-background-100 rounded-full">
-                <SourceIcon sourceType={sourceType} iconSize={20} />
-              </div>
+        <div className="flex-shrink-0 flex items-center">
+          {uniqueSources.slice(0, 3).map((sourceType, ind) => (
+            <div key={ind} className="inline-block ml-1">
+              <SourceIcon sourceType={sourceType} iconSize={16} />
             </div>
           ))}
+          {uniqueSources.length > 3 && (
+            <span className="text-xs text-text-700 font-semibold ml-1">
+              +{uniqueSources.length - 3}
+            </span>
+          )}
         </div>
       </div>
-      <div className="line-clamp-2 text-sm font-semibold"></div>
-      <div className="line-clamp-2 text-sm font-normal leading-snug text-text-700">
+      <div className="line-clamp-2 text-sm font-normal leading-snug text-text-700 mt-1">
         See more
       </div>
     </div>