From ae88b5237086eb7a6582e82f310d50b045f48236 Mon Sep 17 00:00:00 2001
From: Alan Guo Xiang Tan <gxtan1990@gmail.com>
Date: Thu, 9 Dec 2021 08:38:39 +0800
Subject: [PATCH] DEV: Fix position of avatar flair to be based on the actual
 avatar. (#15226)

Previously, it was based on the container of the avatar. However, the
container of the avatar can be extended to contain more than just the
avatar itself. This resulted in the positioning of the avatar flair to
be off.
---
 app/assets/javascripts/discourse/app/widgets/post.js | 12 ++++++++----
 app/assets/stylesheets/common/base/topic-post.scss   |  1 +
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/widgets/post.js b/app/assets/javascripts/discourse/app/widgets/post.js
index a5f7f4b3b9b..2585a75346e 100644
--- a/app/assets/javascripts/discourse/app/widgets/post.js
+++ b/app/assets/javascripts/discourse/app/widgets/post.js
@@ -186,18 +186,22 @@ createWidget("post-avatar", {
       });
     }
 
-    const result = [body];
+    const postAvatarBody = [body];
 
     if (attrs.flair_url || attrs.flair_bg_color) {
-      result.push(this.attach("avatar-flair", attrs));
+      postAvatarBody.push(this.attach("avatar-flair", attrs));
     } else {
       const autoFlairAttrs = autoGroupFlairForUser(this.site, attrs);
+
       if (autoFlairAttrs) {
-        result.push(this.attach("avatar-flair", autoFlairAttrs));
+        postAvatarBody.push(this.attach("avatar-flair", autoFlairAttrs));
       }
     }
 
-    result.push(h("div.poster-avatar-extra"));
+    const result = [
+      h("div.post-avatar", postAvatarBody),
+      h("div.poster-avatar-extra"),
+    ];
 
     if (this.settings.displayPosterName) {
       result.push(this.attach("post-avatar-user-info", attrs));
diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss
index 60e6621e50b..86771addd8e 100644
--- a/app/assets/stylesheets/common/base/topic-post.scss
+++ b/app/assets/stylesheets/common/base/topic-post.scss
@@ -482,6 +482,7 @@ aside.quote {
   }
 }
 
+.post-avatar,
 .topic-avatar,
 .user-card-avatar {
   position: relative;