update avatar style

src/components/post-desktop/post-desktop.tsx

@@ -102,9 +102,9 @@ const PostInfo = ({ openReplyModal, post, postReplyCount = 0, roles, isHidden }:
         {!(isDescription || isRules) && (
           <>
             {isReply && author?.avatar && (
-              <>
+              <span className={styles.authorAvatar}>
-                <span className={styles.authorAvatar} style={{ backgroundImage: `url(${avatarImageUrl})` }} />{' '}
+                <img src={avatarImageUrl} alt='' />
-              </>
+              </span>
             )}
             (u/
             <Tooltip

src/components/post-mobile/post-mobile.tsx

@@ -75,9 +75,9 @@ const PostInfoAndMedia = ({ openReplyModal, post, postReplyCount = 0, roles }: P
           {!(isDescription || isRules) && (
             <>
               {isReply && author?.avatar && (
-                <>
+                <span className={styles.authorAvatar}>
-                  <span className={styles.authorAvatar} style={{ backgroundImage: `url(${avatarImageUrl})` }} />{' '}
+                  <img src={avatarImageUrl} alt='' />
-                </>
+                </span>
               )}
               (u/
               <Tooltip

src/views/post/post.module.css

@@ -505,15 +505,18 @@
 }
 
 .authorAvatar {
-  width: 22px;
+  width: 24px;
-  height: 22px;
-  background-size: 100%;
-  background-position: center;
-  background-repeat: no-repeat;
   display: inline-block;
-  vertical-align: top;
+  position: relative;
+  padding-right: 2px;
 }
 
+.authorAvatar img {
+  width: 24px;
+  max-height: 24px;
+  position: absolute;
+  bottom: -5px;
+}
 
 .stateString {
   white-space: nowrap;
@@ -540,7 +543,13 @@
   }
 
   .authorAvatar {
-    vertical-align: middle;
+    width: 20px;
+  }
+
+  .authorAvatar img {
+    width: 20px;
+    max-height: 20px;
+    bottom: -3px;
   }
 }