fix(style): tooltip overflow

src/pages/llmodels/components/file-parts.tsx

@@ -1,31 +1,36 @@
 import { convertFileSize } from '@/utils';
 import React from 'react';
-import SimpleBar from 'simplebar-react';
 import 'simplebar-react/dist/simplebar.min.css';
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  .file-part-item {
+    width: 180px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+`;
 
 const FileParts: React.FC<{
   showSize?: boolean;
   fileList: any[];
 }> = ({ fileList, showSize = true }) => {
   return (
-    <SimpleBar
-      style={{ maxHeight: 200 }}
-      classNames={{ scrollbar: 'scrollbar-handle-light simplebar-scrollbar' }}
-    >
-      <div style={{ padding: 10 }}>
-        {fileList.map((file, index) => {
-          return (
-            <div key={index} className="flex-between m-b-5">
-              <span>
-                {' '}
-                Part {file.part} of {file.total}
-              </span>
-              {showSize && <span>{convertFileSize(file.size)}</span>}
-            </div>
-          );
-        })}
-      </div>
-    </SimpleBar>
+    <Wrapper>
+      {fileList.map((file, index) => {
+        return (
+          <div key={index} className="file-part-item">
+            <span>
+              Part {file.part} of {file.total}
+            </span>
+            {<span>{convertFileSize(file.size)}</span>}
+          </div>
+        );
+      })}
+    </Wrapper>
   );
 };
 

src/pages/llmodels/components/model-file-item.tsx

@@ -1,6 +1,7 @@
+import { TooltipOverlayScroller } from '@/components/overlay-scroller';
 import { convertFileSize } from '@/utils';
 import { InfoCircleOutlined } from '@ant-design/icons';
-import { Tag, Tooltip } from 'antd';
+import { Tag } from 'antd';
 import classNames from 'classnames';
 import _ from 'lodash';
 import React from 'react';
@@ -24,13 +25,7 @@ const FilePartsTag = (props: { parts: any[] }) => {
   }
   const { parts } = props;
   return (
-    <Tooltip
-      overlayInnerStyle={{
-        width: 180,
-        padding: 0
-      }}
-      title={<FileParts fileList={parts}></FileParts>}
-    >
+    <TooltipOverlayScroller title={<FileParts fileList={parts}></FileParts>}>
       <Tag
         className="tag-item"
         color="purple"
@@ -43,7 +38,7 @@ const FilePartsTag = (props: { parts: any[] }) => {
           {parts.length} parts
         </span>
       </Tag>
-    </Tooltip>
+    </TooltipOverlayScroller>
   );
 };