From 64f930b1c57bd6a496e70a0dfc904ab60af947ce Mon Sep 17 00:00:00 2001
From: Jason Li <wemodjason@gmail.com>
Date: Thu, 29 May 2025 05:10:02 +0200
Subject: [PATCH] Truncate long agent descriptions text (#7924)

Truncate long agent descriptions to prevent overflow outside the agent
card container

### What problem does this PR solve?

Now the Long text of description will overflow from the agent card,
should display the long text properly with truncate.

<img width="275" alt="Screenshot 2025-05-28 220329"
src="https://github.com/user-attachments/assets/954b3a48-bcab-4669-a42f-6981d4bf859f"
/>

<img width="275" alt="Screenshot 2025-05-28 220353"
src="https://github.com/user-attachments/assets/f385d95a-3e40-4117-b412-ae6a4508e646"
/>


### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)
- [ ] New Feature (non-breaking change which adds functionality)
- [ ] Documentation Update
- [ ] Refactoring
- [ ] Performance Improvement
- [ ] Other (please describe):
---
 web/src/pages/flow/list/flow-card/index.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/web/src/pages/flow/list/flow-card/index.tsx b/web/src/pages/flow/list/flow-card/index.tsx
index dbde4cf51..38586a8e7 100644
--- a/web/src/pages/flow/list/flow-card/index.tsx
+++ b/web/src/pages/flow/list/flow-card/index.tsx
@@ -51,7 +51,9 @@ const FlowCard = ({ item }: IProps) => {
             >
               {item.title}
             </Typography.Title>
-            <p>{item.description}</p>
+            <p className="truncate" title={item.description}>
+              {item.description}
+            </p>
           </div>
           <div className={styles.footer}>
             <div className={styles.bottom}>