chore: handle tag name too long

This commit is contained in:
Joel 2024-10-16 16:39:47 +08:00
parent f981494613
commit 1787c5c93f
3 changed files with 9 additions and 7 deletions

View File

@ -67,7 +67,7 @@ const PluginList = async () => {
payload={plugin as any} payload={plugin as any}
locale={locale} locale={locale}
footer={ footer={
<CardMoreInfo downloadCount={index % 2 === 0 ? 1234 : 6} tags={index % 2 === 0 ? ['Search', 'Productivity'] : []} /> <CardMoreInfo downloadCount={index % 2 === 0 ? 1234 : 6} tags={index % 2 === 0 ? ['Search', 'Tag that has very very long name', 'Productivity', 'Tag2'] : []} />
} }
/> />
))} ))}

View File

@ -17,9 +17,7 @@ const OrgInfo = ({
{orgName && ( {orgName && (
<> <>
<span className='shrink-0 text-text-tertiary system-xs-regular'>{orgName}</span> <span className='shrink-0 text-text-tertiary system-xs-regular'>{orgName}</span>
<span className='shrink-0 text-text-quaternary system-xs-regular'> <span className='shrink-0 text-text-quaternary system-xs-regular'>/</span>
/
</span>
</> </>
)} )}
<span className={cn('shrink-0 w-0 grow truncate text-text-tertiary system-xs-regular', packageNameClassName)}> <span className={cn('shrink-0 w-0 grow truncate text-text-tertiary system-xs-regular', packageNameClassName)}>

View File

@ -15,11 +15,15 @@ const CardMoreInfo = ({
{downloadCount !== undefined && tags && tags.length > 0 && <div className="mx-2 text-text-quaternary system-xs-regular">·</div>} {downloadCount !== undefined && tags && tags.length > 0 && <div className="mx-2 text-text-quaternary system-xs-regular">·</div>}
{tags && tags.length > 0 && ( {tags && tags.length > 0 && (
<> <>
<div className="flex space-x-2"> <div className="flex flex-wrap space-x-2 h-4 overflow-hidden">
{tags.map(tag => ( {tags.map(tag => (
<div key={tag} className="flex space-x-1 system-xs-regular"> <div
key={tag}
className="flex space-x-1 system-xs-regular max-w-[120px] overflow-hidden"
title={`# ${tag}`}
>
<span className="text-text-quaternary">#</span> <span className="text-text-quaternary">#</span>
<span className="text-text-tertiary">{tag}</span> <span className="truncate text-text-tertiary">{tag}</span>
</div> </div>
))} ))}
</div> </div>