diff --git a/src/renderer/src/pages/home/Messages/MessageAttachments.tsx b/src/renderer/src/pages/home/Messages/MessageAttachments.tsx
index d77d605716..b3c3bdba59 100644
--- a/src/renderer/src/pages/home/Messages/MessageAttachments.tsx
+++ b/src/renderer/src/pages/home/Messages/MessageAttachments.tsx
@@ -19,6 +19,17 @@ interface Props {
   message: Message
 }
 
+const StyledUpload = styled(Upload)`
+  .ant-upload-list-item-name {
+    max-width: 220px;
+    display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    vertical-align: bottom;
+  }
+`
+
 const MessageAttachments: FC<Props> = ({ message }) => {
   const handleCopyImage = async (image: FileType) => {
     const data = await FileManager.readFile(image)
@@ -66,17 +77,6 @@ const MessageAttachments: FC<Props> = ({ message }) => {
     )
   }
 
-  const StyledUpload = styled(Upload)`
-    .ant-upload-list-item-name {
-      max-width: 220px;
-      display: inline-block;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      vertical-align: bottom;
-    }
-  `
-
   return (
     <Container style={{ marginTop: 2, marginBottom: 8 }} className="message-attachments">
       <StyledUpload