diff --git a/app/assets/javascripts/discourse/app/widgets/poster-name.js b/app/assets/javascripts/discourse/app/widgets/poster-name.js
index 1d93907a666..e8f2f8d80a2 100644
--- a/app/assets/javascripts/discourse/app/widgets/poster-name.js
+++ b/app/assets/javascripts/discourse/app/widgets/poster-name.js
@@ -141,8 +141,41 @@ export default createWidget("poster-name", {
       }
     }
 
+    const afterNameContents =
+      applyDecorators(this, "after-name", attrs, this.state) || [];
+
+    nameContents = nameContents.concat(afterNameContents);
+
+    const contents = [
+      h("span", { className: classNames.join(" ") }, nameContents),
+    ];
+
+    if (this.settings.showNameAndGroup) {
+      if (
+        name &&
+        this.siteSettings.display_name_on_posts &&
+        sanitizeName(name) !== sanitizeName(username)
+      ) {
+        contents.push(
+          h(
+            "span.second." + (nameFirst ? "username" : "full-name"),
+            [this.userLink(attrs, nameFirst ? username : name)].concat(
+              afterNameContents
+            )
+          )
+        );
+      }
+
+      this.buildTitleObject(attrs, contents);
+
+      if (this.siteSettings.enable_user_status) {
+        this.addUserStatus(contents, attrs);
+      }
+    }
+
     if (attrs.badgesGranted?.length) {
       const badges = [];
+
       attrs.badgesGranted.forEach((badge) => {
         // Alter the badge description to show that the badge was granted for this post.
         badge.description = i18n("post.badge_granted_tooltip", {
@@ -161,41 +194,8 @@ export default createWidget("poster-name", {
         );
         badges.push(badgeIcon);
       });
-      nameContents.push(h("span.user-badge-buttons", badges));
-    }
 
-    const afterNameContents =
-      applyDecorators(this, "after-name", attrs, this.state) || [];
-
-    nameContents = nameContents.concat(afterNameContents);
-
-    const contents = [
-      h("span", { className: classNames.join(" ") }, nameContents),
-    ];
-
-    if (!this.settings.showNameAndGroup) {
-      return contents;
-    }
-
-    if (
-      name &&
-      this.siteSettings.display_name_on_posts &&
-      sanitizeName(name) !== sanitizeName(username)
-    ) {
-      contents.push(
-        h(
-          "span.second." + (nameFirst ? "username" : "full-name"),
-          [this.userLink(attrs, nameFirst ? username : name)].concat(
-            afterNameContents
-          )
-        )
-      );
-    }
-
-    this.buildTitleObject(attrs, contents);
-
-    if (this.siteSettings.enable_user_status) {
-      this.addUserStatus(contents, attrs);
+      contents.push(h("span.user-badge-buttons", badges));
     }
 
     return contents;
diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss
index d0331bbfdc4..3cae298399d 100644
--- a/app/assets/stylesheets/common/base/topic-post.scss
+++ b/app/assets/stylesheets/common/base/topic-post.scss
@@ -257,10 +257,15 @@
 
   .names {
     margin-right: auto;
+
+    .first {
+      flex-shrink: 0;
+    }
   }
 
   .user-badge-buttons {
-    margin-left: 15px;
+    display: flex;
+    flex-shrink: 0;
 
     a {
       background: none;
@@ -278,8 +283,9 @@
     align-items: center;
   }
 
-  .user-status-message {
+  .user-status-message-wrap {
     display: flex;
+    flex-shrink: 0;
 
     img.emoji {
       width: 1em;