diff --git a/src/pages/home/previews/info.tsx b/src/pages/home/previews/info.tsx
index 92ba701..91f2db9 100644
--- a/src/pages/home/previews/info.tsx
+++ b/src/pages/home/previews/info.tsx
@@ -6,14 +6,21 @@ import { getIconByObj } from "~/utils/icon";
 
 export const FileInfo = (props: { children: JSXElement }) => {
   return (
-    <VStack py="$6" spacing="$6">
+    <VStack class="fileinfo" py="$6" spacing="$6">
       <Icon
         color={getMainColor()}
         boxSize="$20"
         as={getIconByObj(objStore.obj)}
       />
       <VStack spacing="$2">
-        <Heading size="lg">{objStore.obj.name}</Heading>
+        <Heading
+          size="lg"
+          css={{
+            wordBreak: "break-all",
+          }}
+        >
+          {objStore.obj.name}
+        </Heading>
         <Text color="$neutral10" size="sm">
           {getFileSize(objStore.obj.size)} · {formatDate(objStore.obj.modified)}
         </Text>