From 7646402ca45c80b5c32d1a27d43a9664e14a71e4 Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Mon, 22 Jul 2024 16:52:13 +0200
Subject: [PATCH] update avatar style

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

diff --git a/src/components/post-desktop/post-desktop.tsx b/src/components/post-desktop/post-desktop.tsx
index 1b73dfad..5d84ba7e 100644
--- a/src/components/post-desktop/post-desktop.tsx
+++ b/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} style={{ backgroundImage: `url(${avatarImageUrl})` }} />{' '}
-              </>
+              <span className={styles.authorAvatar}>
+                <img src={avatarImageUrl} alt='' />
+              </span>
             )}
             (u/
             <Tooltip
diff --git a/src/components/post-mobile/post-mobile.tsx b/src/components/post-mobile/post-mobile.tsx
index 4d735d41..bd50aafc 100644
--- a/src/components/post-mobile/post-mobile.tsx
+++ b/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} style={{ backgroundImage: `url(${avatarImageUrl})` }} />{' '}
-                </>
+                <span className={styles.authorAvatar}>
+                  <img src={avatarImageUrl} alt='' />
+                </span>
               )}
               (u/
               <Tooltip
diff --git a/src/views/post/post.module.css b/src/views/post/post.module.css
index 4b8a2777..5c9e6bb0 100644
--- a/src/views/post/post.module.css
+++ b/src/views/post/post.module.css
@@ -505,15 +505,18 @@
 }
 
 .authorAvatar {
-  width: 22px;
-  height: 22px;
-  background-size: 100%;
-  background-position: center;
-  background-repeat: no-repeat;
+  width: 24px;
   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;
   }
 }