From 1787c5c93f32059881fdb4f649de280cb878d532 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Wed, 16 Oct 2024 16:39:47 +0800
Subject: [PATCH] chore: handle tag name too long

---
 web/app/(commonLayout)/plugins/test/card/page.tsx  |  2 +-
 web/app/components/plugins/card/base/org-info.tsx  |  4 +---
 web/app/components/plugins/card/card-more-info.tsx | 10 +++++++---
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/web/app/(commonLayout)/plugins/test/card/page.tsx b/web/app/(commonLayout)/plugins/test/card/page.tsx
index db54d5c9d3..eea1d32bec 100644
--- a/web/app/(commonLayout)/plugins/test/card/page.tsx
+++ b/web/app/(commonLayout)/plugins/test/card/page.tsx
@@ -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'] : []} />
               }
             />
           ))}
diff --git a/web/app/components/plugins/card/base/org-info.tsx b/web/app/components/plugins/card/base/org-info.tsx
index 0d335eacad..3d549d6c5e 100644
--- a/web/app/components/plugins/card/base/org-info.tsx
+++ b/web/app/components/plugins/card/base/org-info.tsx
@@ -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)}>
diff --git a/web/app/components/plugins/card/card-more-info.tsx b/web/app/components/plugins/card/card-more-info.tsx
index b3328e53bd..b7ba8c1a53 100644
--- a/web/app/components/plugins/card/card-more-info.tsx
+++ b/web/app/components/plugins/card/card-more-info.tsx
@@ -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>