optimize avatar in detail (#7601)

Co-authored-by: zhouwenxuan <aries@Mac.local>

frontend/src/components/dialog/image-dialog/index.css

@@ -52,7 +52,7 @@
   width: 100%;
   height: fit-content;
   display: flex;
-  padding: 26px 16px;
+  padding: 20px 16px;
   border: none;
   font-size: 1rem;
 }
@@ -69,10 +69,6 @@
   padding: 0 16px 8px;
 }
 
-.lightbox-side-panel .file-details-collapse+.dirent-detail-people {
-  margin-top: 20px;
-}
-
 .lightbox-side-panel .sf-metadata-ui.collaborator-item,
 .lightbox-side-panel .sf-metadata-text-property-detail-editor:not(.formatter),
 .lightbox-side-panel .sf-metadata-number-property-detail-editor:focus {
@@ -96,6 +92,9 @@
   background-color: #666;
 }
 
-.lightbox-side-panel .dirent-detail-people {
-  border-top: 1px solid #999;
+.lightbox-side-panel .detail-body .dirent-detail-people {
+  position: relative;
+  transform: none;
+  padding-bottom: 16px;
+  border-bottom: 1px solid #999;
 }

frontend/src/components/dirent-detail/dirent-details/file-details/index.js

@@ -108,6 +108,7 @@ const FileDetails = React.memo(({ repoID, dirent, path, direntDetail, isShowRepo
 
     component = (
       <>
+        {enableMetadata && enableFaceRecognition && <People repoID={repoID} record={record} />}
         <Collapse title={gettext('General information')}>
           {dom}
         </Collapse>
@@ -130,9 +131,6 @@ const FileDetails = React.memo(({ repoID, dirent, path, direntDetail, isShowRepo
   return (
     <>
       {component}
-      {enableFaceRecognition && Utils.imageCheck(dirent.name) && (
-        <People repoID={repoID} record={record} />
-      )}
     </>
   );
 }, (props, nextProps) => {

frontend/src/components/dirent-detail/dirent-details/index.css

@@ -41,7 +41,16 @@
   padding: 6.5px 6px;;
 }
 
+.detail-body .detail-content {
+  position: relative;
+}
+
 .detail-body .detail-content.detail-content-empty {
   width: 100%;
   height: 100%;
 }
+
+.detail-body .dirent-detail-people {
+  position: absolute;
+  transform: translateY(-50px);
+}

frontend/src/components/dirent-detail/people/index.css

@@ -1,15 +1,12 @@
 .dirent-detail-people {
   display: flex;
   flex-wrap: wrap;
-  gap: 12px;
-  margin-bottom: 20px;
-  border-top: 1px solid #eee;
-  padding-top: 20px;
+  gap: 10px;
 }
 
 .dirent-detail-people .dirent-detail-people-item {
-  width: 32px;
-  height: 32px;
+  width: 28px;
+  height: 28px;
   border-radius: 50%;
   overflow: hidden;
 }