refactor: refactor upload component layout and styling for responsiveness #674

fix: 当插入文件过多的时候，无法看到输入框了。 close #674

src/renderer/src/pages/home/Inputbar/AttachmentPreview.tsx

@@ -17,8 +17,9 @@ const AttachmentPreview: FC<Props> = ({ files, setFiles }) => {
 
   return (
     <Container>
+      <ContentContainer>
         <Upload
-        listType="picture-card"
+          listType={files.length > 20 ? 'text' : 'picture-card'}
           fileList={files.map((file) => ({
             uid: file.id,
             url: 'file://' + FileManager.getSafePath(file),
@@ -27,6 +28,7 @@ const AttachmentPreview: FC<Props> = ({ files, setFiles }) => {
           }))}
           onRemove={(item) => setFiles(files.filter((file) => item.uid !== file.id))}
         />
+      </ContentContainer>
     </Container>
   )
 }
@@ -35,9 +37,16 @@ const Container = styled.div`
   display: flex;
   flex-direction: row;
   gap: 10px;
-  padding: 10px 20px;
+  padding: 10px 0;
   background: var(--color-background);
   border-top: 1px solid var(--color-border-mute);
 `
 
+const ContentContainer = styled.div`
+  max-height: 40vh;
+  width: 100%;
+  overflow-y: auto;
+  padding: 0 20px;
+`
+
 export default AttachmentPreview