diff --git a/web/src/app/chat/message/SourcesDisplay.tsx b/web/src/app/chat/message/SourcesDisplay.tsx
index c45064f8c..d8310d85d 100644
--- a/web/src/app/chat/message/SourcesDisplay.tsx
+++ b/web/src/app/chat/message/SourcesDisplay.tsx
@@ -33,16 +33,14 @@ const SourceCard: React.FC<{
   return (
     <button
       onClick={() => openDocument(document, () => {})}
-      className="max-w-[260px] h-[80px] p-3 bg-[#f1eee8] text-left hover:bg-[#ebe7de] cursor-pointer rounded-lg flex flex-col justify-between"
+      className="w-full max-w-[260px] h-[80px] p-3 bg-[#f1eee8] text-left hover:bg-[#ebe7de] cursor-pointer rounded-lg flex flex-col justify-between overflow-hidden"
     >
-      <div className="text-black text-xs line-clamp-2 font-medium leading-tight">
-        {/* {truncatedtext} */}
-        {/* {truncatedtext.length === 80 ? "..." : ""} */}
-        {documentSummary}
+      <div className="text-black text-xs line-clamp-2 font-medium leading-tight overflow-hidden">
+        <span className="break-words">{documentSummary}</span>
       </div>
-      <div className="flex items-center gap-1">
+      <div className="flex items-center gap-1 mt-1">
         <ResultIcon doc={document} size={14} />
-        <div className="text-[#4a4a4a] text-xs leading-tight truncate">
+        <div className="text-[#4a4a4a] text-xs leading-tight truncate flex-1 min-w-0">
           {truncatedIdentifier}
         </div>
       </div>
diff --git a/web/src/components/chat_search/sources/SourceCard.tsx b/web/src/components/chat_search/sources/SourceCard.tsx
index bba578428..30f970ef9 100644
--- a/web/src/components/chat_search/sources/SourceCard.tsx
+++ b/web/src/components/chat_search/sources/SourceCard.tsx
@@ -105,7 +105,7 @@ export function SeeMoreBlock({
   return (
     <button
       onClick={toggleDocumentSelection}
-      className="max-w-[260px]  min-w-[200px] h-[80px] p-3 bg-[#f1eee8] border border-[#d8d0c0] hover:bg-[#ebe7de] cursor-pointer rounded-lg flex flex-col items-start justify-between transition-opacity duration-300"
+      className="w-full max-w-[260px] h-[80px] p-3 bg-[#f1eee8] text-left hover:bg-[#ebe7de] cursor-pointer rounded-lg flex flex-col justify-between overflow-hidden"
     >
       <div className="flex items-center gap-1">
         {iconsToRender.map((icon, index) =>