diff --git a/frontend/src/components/dirent-detail/detail-item/index.css b/frontend/src/components/dirent-detail/detail-item/index.css
index f24faabed4..914817df05 100644
--- a/frontend/src/components/dirent-detail/detail-item/index.css
+++ b/frontend/src/components/dirent-detail/detail-item/index.css
@@ -17,13 +17,13 @@
   height: fit-content;
   color: #666;
   font-size: 14px;
-  line-height: 1.5;
 }
 
 .dirent-detail-item .dirent-detail-item-name .sf-metadata-icon {
   margin-right: 6px;
   font-size: 14px;
   fill: #999;
+  flex-shrink: 0;
 }
 
 .dirent-detail-item .dirent-detail-item-value {
diff --git a/frontend/src/components/dirent-detail/detail-item/index.js b/frontend/src/components/dirent-detail/detail-item/index.js
index 468d520fe9..f01d3b8371 100644
--- a/frontend/src/components/dirent-detail/detail-item/index.js
+++ b/frontend/src/components/dirent-detail/detail-item/index.js
@@ -14,8 +14,8 @@ const DetailItem = ({ readonly, field, className, children }) => {
 
   return (
     <div className={classnames('dirent-detail-item', className)}>
-      <div className="dirent-detail-item-name">
-        <Icon iconName={icon} />
+      <div className="dirent-detail-item-name d-flex">
+        <div><Icon iconName={icon} /></div>
         <span className="dirent-detail-item-name-value">{field.name}</span>
       </div>
       <div className={classnames('dirent-detail-item-value', { 'editable': !readonly })} >