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}
locale={locale}
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 && (
<>
<span className='shrink-0 text-text-tertiary system-xs-regular'>{orgName}</span>
<span className='shrink-0 text-text-quaternary system-xs-regular'>
/
</span>
<span className='shrink-0 text-text-quaternary system-xs-regular'>/</span>
</>
)}
<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>}
{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 => (
<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-tertiary">{tag}</span>
<span className="truncate text-text-tertiary">{tag}</span>
</div>
))}
</div>