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>