From 9832b27774ffe008f6d5ed741a122c1587e07a01 Mon Sep 17 00:00:00 2001
From: Qian Xia <lauraxiaqian@gmail.com>
Date: Mon, 28 Oct 2024 10:44:43 +0800
Subject: [PATCH] [#4641] fix(web): improvement scroll bar on the catalog
 detail page ellipsis display (#5271)

### What changes were proposed in this pull request?

improvement scroll bar on the catalog detail page ellipsis display

![image](https://github.com/user-attachments/assets/de7e44ea-0c37-4b34-ab52-c171259e3bf2)

Fix: #4641

### Does this PR introduce _any_ user-facing change?
N/A

### How was this patch tested?
manually
---
 web/web/src/components/DetailsDrawer.js | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/web/web/src/components/DetailsDrawer.js b/web/web/src/components/DetailsDrawer.js
index c470af43cc5..858e2d5ab85 100644
--- a/web/web/src/components/DetailsDrawer.js
+++ b/web/web/src/components/DetailsDrawer.js
@@ -205,16 +205,19 @@ const DetailsDrawer = props => {
                 {properties.map((item, index) => {
                   return (
                     <TableRow key={index} data-refer={`details-props-index-${index}`}>
-                      <TableCell className={'twc-py-[0.7rem]'} data-refer={`details-props-key-${item.key}`}>
+                      <TableCell
+                        className={'twc-py-[0.7rem] twc-truncate twc-max-w-[134px]'}
+                        data-refer={`details-props-key-${item.key}`}
+                      >
                         <Tooltip
                           title={<span data-refer={`tip-details-props-key-${item.key}`}>{item.key}</span>}
                           placement='bottom'
                         >
-                          {item.key.length > 22 ? `${item.key.substring(0, 22)}...` : item.key}
+                          {item.key}
                         </Tooltip>
                       </TableCell>
                       <TableCell
-                        className={'twc-py-[0.7rem]'}
+                        className={'twc-py-[0.7rem] twc-truncate twc-max-w-[134px]'}
                         data-refer={`details-props-value-${item.value}`}
                         data-prev-refer={`details-props-key-${item.key}`}
                       >
@@ -224,7 +227,7 @@ const DetailsDrawer = props => {
                             title={<span data-prev-refer={`tip-details-props-key-${item.key}`}>{item.value}</span>}
                             placement='bottom'
                           >
-                            {item.value.length > 22 ? `${item.value.substring(0, 22)}...` : item.value}
+                            {item.value}
                           </Tooltip>
                         )}
                       </TableCell>