(gravitino) branch branch-0.7 updated: [#4641] fix(web): improvement scroll bar on the catalog detail page ellipsis display (#5287)

[jshao]

This is an automated email from the ASF dual-hosted git repository.

jshao pushed a commit to branch branch-0.7
in repository https://gitbox.apache.org/repos/asf/gravitino.git


The following commit(s) were added to refs/heads/branch-0.7 by this push:
     new 41d245978 [#4641] fix(web): improvement scroll bar on the catalog 
detail page ellipsis display (#5287)
41d245978 is described below

commit 41d2459784bef4255c3c4f2fae6fd613035028fe
Author: github-actions[bot] 
<41898282+github-actions[bot]@users.noreply.github.com>
AuthorDate: Mon Oct 28 11:08:45 2024 +0800

    [#4641] fix(web): improvement scroll bar on the catalog detail page 
ellipsis display (#5287)
    
    ### 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
    
    Co-authored-by: Qian Xia <lauraxiaq...@gmail.com>
---
 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 c470af43c..858e2d5ab 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>