improved display - no odd cutoffs (#3401)

This commit is contained in:
pablonyx
2024-12-11 08:09:19 -08:00
committed by GitHub
parent ad6be03b4d
commit 09fe8ea868

View File

@@ -57,29 +57,27 @@ export function SeeMoreBlock({
onClick={toggleDocumentSelection} onClick={toggleDocumentSelection}
className={` className={`
${documentSelectionToggled ? "border-border-100 border" : ""} ${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"> <div className="flex h-6 items-center text-sm">
<p className="mr-0 flex-shrink-0"> <p className="flex-1 mr-1 font-semibold text-text-900 overflow-hidden text-ellipsis whitespace-nowrap">
{documentSelectionToggled ? "Hide sources" : "See context"} {documentSelectionToggled ? "Hide sources" : "See context"}
</p> </p>
<div className="flex -space-x-3 flex-shrink-0 overflow-hidden"> <div className="flex-shrink-0 flex items-center">
{uniqueSources.map((sourceType, ind) => ( {uniqueSources.slice(0, 3).map((sourceType, ind) => (
<div <div key={ind} className="inline-block ml-1">
key={ind} <SourceIcon sourceType={sourceType} iconSize={16} />
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> </div>
))} ))}
{uniqueSources.length > 3 && (
<span className="text-xs text-text-700 font-semibold ml-1">
+{uniqueSources.length - 3}
</span>
)}
</div> </div>
</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 mt-1">
<div className="line-clamp-2 text-sm font-normal leading-snug text-text-700">
See more See more
</div> </div>
</div> </div>