fix overflow of file item

Author: ankormoreankor

packages/ui/src/components/file-explorer.tsx

@@ -108,16 +108,17 @@ function FolderItem({ children, value = '', isActive, content, link, level }: Fo
   )
 }
 
-interface FileItemProps {
+type FileItemProps = {
   level: number
   children: ReactNode
   isActive?: boolean
   link?: string
   onClick?: () => void
   tooltip?: TooltipProps['content']
+  [key: `data-${string}`]: any
 }
 
-function FileItem({ children, isActive, level, link, onClick, tooltip }: FileItemProps) {
+function FileItem({ children, isActive, level, link, onClick, tooltip, ...dataProps }: FileItemProps) {
   const comp = (
     <Item
       icon="empty-page"
@@ -126,6 +127,7 @@ function FileItem({ children, isActive, level, link, onClick, tooltip }: FileIte
       style={{ marginLeft: `calc(-16px * ${level})`, paddingLeft: level ? `calc(16px * ${level} + 8px)` : '24px' }}
       onClick={onClick}
       link={link}
+      {...dataProps}
     >
       {children}
     </Item>

packages/ui/src/views/repo/pull-request/details/components/changes/pull-request-changes-explorer.tsx

@@ -359,8 +359,9 @@ function renderTree(
               )}
             </Layout.Flex>
           }
+          data-explorer-path={node.path}
         >
-          <div data-explorer-path={node.path}>{node.name}</div>
+          {node.name}
         </FileExplorer.FileItem>
       )
     }