refactor: polish the tailwind refactor

src/common/component/Message/Reply.tsx

@@ -14,7 +14,7 @@ const renderContent = (data: MessagePayload) => {
   switch (content_type) {
     case ContentTypes.text:
       res = (
-        <span className="text-ellipsis overflow-hidden break-words break-all text-gray-800 dark:text-gray-100">
+        <span className="truncate break-words break-all text-gray-800 dark:text-gray-100">
           <LinkifyText text={content} url={false} mentionTextOnly={true} mentionPopOver={false} />
         </span>
       );

src/common/component/Message/URLPreview.tsx

@@ -41,7 +41,7 @@ export default function URLPreview({ url = "" }) {
   const { title, description, ogImage } = data;
 
   const containerClass = `flex items-center border border-solid border-gray-300 box-border rounded-md w-[380px]`;
-  const dotsClass = `overflow-hidden whitespace-nowrap text-ellipsis`;
+  const dotsClass = `truncate`;
   return ogImage ? (
     <a className={`${containerClass} flex-col !items-start p-3`} href={url} target="_blank" rel="noreferrer">
       <h3 className={`text-base text-primary-500 w-full ${dotsClass}`}>{title}</h3>

src/common/component/Message/index.tsx

@@ -111,8 +111,8 @@ const Message: FC<IProps> = ({
         trigger="click"
         content={<Profile uid={fromUid || 0} type="card" cid={context == "user" ? 0 : contextId} />}
       >
-        <div className="cursor-pointer" data-uid={fromUid} ref={avatarRef}>
-          <Avatar width={40} height={40} src={currUser?.avatar} name={currUser?.name} />
+        <div className="cursor-pointer w-10 h-10 flex-shrink-0" data-uid={fromUid} ref={avatarRef}>
+          <Avatar className="w-10 h-10 rounded-full object-cover" width={40} height={40} src={currUser?.avatar} name={currUser?.name} />
         </div>
       </Tippy>
       <ContextMenu