style: fix avatars

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

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

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

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

src/views/post/post.module.css

@@ -505,14 +505,13 @@
 }
 
 .authorAvatar {
-  width: 32px;
-  height: 32px;
+  width: 22px;
+  height: 22px;
   background-size: 100%;
   background-position: center;
   background-repeat: no-repeat;
   display: inline-block;
-  vertical-align: middle;
-  border-radius: 16px;
+  vertical-align: top;
 }
 
 @media (max-width: 640px) {
@@ -531,7 +530,11 @@
   .loadingString {
     margin-top: 10px;
     margin-left: 5px;
-  } 
+  }
+
+  .authorAvatar {
+    vertical-align: middle;
+  }
 }
 
 @media (min-width: 640px) {