refactor: avatar size

src/common/component/Avatar.tsx

@@ -39,7 +39,7 @@ const Avatar: FC<Props> = ({
     setAvatarSrc("");
   };
   if (avatarSrc) {
-    return <img src={avatarSrc} onError={handleError} {...rest} />;
+    return <img width={width} height={height} src={avatarSrc} onError={handleError} {...rest} />;
   }
   return (
     <div

src/common/component/Message/FavoredMessage.tsx

@@ -24,8 +24,8 @@ const FavoredMessage: FC<Props> = ({ id = "" }) => {
             return (
               <div className="w-full relative flex items-start gap-3 px-2 py-1 my-2 rounded-lg dark:hover:bg-gray-800" key={idx}>
                 {user && (
-                  <div className="">
-                    <Avatar width={40} height={40} src={user.avatar} name={user.name} />
+                  <div className="shrink-0">
+                    <Avatar width={40} height={40} className="rounded-full object-cover" src={user.avatar} name={user.name} />
                   </div>
                 )}
                 <div className="w-full flex flex-col gap-2 text-sm">

src/common/component/Message/PreviewMessage.tsx

@@ -19,9 +19,7 @@ const PreviewMessage: FC<Props> = ({ mid = 0, context }) => {
   const pinMsg = context == "pin";
   return (
     <div className={clsx(`w-full relative flex items-start gap-3 p-2 my-2 rounded-lg`, pinMsg && "max-h-64 overflow-auto overflow-x-hidden border border-solid border-gray-200 dark:border-gray-400")}>
-      <div>
-        <Avatar width={40} height={40} src={avatar} name={name} />
-      </div>
+      <Avatar width={40} height={40} className="rounded-full object-cover" src={avatar} name={name} />
       <div className="w-full flex flex-col items-start">
         <div className="flex items-center gap-2 font-semibold">
           <span className="text-gray-500 text-sm">{name}</span>