From d76b03bf3f2a6ff87e4d34493978877c83f4089f Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Fri, 19 Jul 2024 18:06:00 +0200
Subject: [PATCH] style: fix avatars

---
 src/components/post-desktop/post-desktop.tsx |  6 +++++-
 src/components/post-mobile/post-mobile.tsx   |  6 +++++-
 src/views/post/post.module.css               | 13 ++++++++-----
 3 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/components/post-desktop/post-desktop.tsx b/src/components/post-desktop/post-desktop.tsx
index 11016b5d..6cf66665 100644
--- a/src/components/post-desktop/post-desktop.tsx
+++ b/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={
diff --git a/src/components/post-mobile/post-mobile.tsx b/src/components/post-mobile/post-mobile.tsx
index 910b2ada..283edf32 100644
--- a/src/components/post-mobile/post-mobile.tsx
+++ b/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={
diff --git a/src/views/post/post.module.css b/src/views/post/post.module.css
index 93c9b554..b623960d 100644
--- a/src/views/post/post.module.css
+++ b/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) {