refactor: polish the tailwind refactor

src/common/component/FileMessage/AudioMessage.tsx

@@ -23,7 +23,7 @@ const AudioMessage = ({ url, name, size, download }: Props) => {
                 <div className="flex gap-2 ">
                     <IconAudio className="w-9 h-auto" />
                     <div className="flex flex-col gap-1 text-sm text-gray-700">
-                        <span title={name} className='font-bold whitespace-nowrap text-ellipsis w-[240px] overflow-hidden'>{name}</span>
+                        <span title={name} className='font-bold w-[240px] truncate'>{name}</span>
                         <span>{_size}</span>
                     </div>
                 </div>

src/common/component/FileMessage/VideoMessage.tsx

@@ -43,7 +43,7 @@ const VideoMessage = ({ url, name, size, download }: Props) => {
                 <div className="flex gap-2 ">
                     <IconVideo className="w-9 h-auto" />
                     <div className="flex flex-col gap-1 text-sm text-white">
-                        <span title={name} className='font-bold whitespace-nowrap text-ellipsis w-[240px] overflow-hidden'>{name}</span>
+                        <span title={name} className='font-bold w-[240px] truncate'>{name}</span>
                         <span>{_size}</span>
                     </div>
                 </div>

src/common/component/FileMessage/index.tsx

@@ -156,11 +156,11 @@ const FileMessage: FC<Props> = ({
       />
     );
   return (
-    <div className={clsx(`file_message bg-slate-50 dark:bg-slate-900 border border-solid border-gray-300 dark:border-gray-500 box-border w-[370px] h-[66px] rounded-md`, sending && "opacity-90")}>
-      <div className="p-2 flex items-center justify-between gap-2">
+    <div className={clsx(`file_message bg-slate-50 dark:bg-slate-900 border border-solid border-gray-300 dark:border-gray-500 box-border w-[370px] rounded-md`, sending && "opacity-90")}>
+      <div className="px-2 py-3 flex items-center justify-between gap-2">
         {icon}
         <div className="flex flex-col gap-1 w-full overflow-hidden">
-          <span className="font-semibold text-sm text-gray-800 dark:text-gray-100 whitespace-nowrap text-ellipsis">{name}</span>
+          <span className="font-semibold text-sm text-gray-800 dark:text-gray-100 truncate">{name}</span>
           <span className="whitespace-nowrap text-xs text-gray-500 dark:text-gray-300 flex gap-4">
             {sending ? (
               <Progress value={progress} width={"80%"} />