diff --git a/app/assets/javascripts/discourse/templates/components/user-card-contents.hbs b/app/assets/javascripts/discourse/templates/components/user-card-contents.hbs
index cf45d786968..32cc458f473 100644
--- a/app/assets/javascripts/discourse/templates/components/user-card-contents.hbs
+++ b/app/assets/javascripts/discourse/templates/components/user-card-contents.hbs
@@ -18,36 +18,35 @@
         {{plugin-outlet name="user-card-avatar-flair" args=(hash user=user) tagName='div'}}
       </div>
       <div class="names">
-        <span>
-          <h1 class="{{staff}} {{newUser}} {{if nameFirst "full-name" "username"}}">
-            {{#if user.profile_hidden}}
-              <span>
-                {{if nameFirst user.name (format-username username)}}
-                {{user-status user currentUser=currentUser}}
-              </span>
-            {{else}}
-              <a href="{{user.path}}" {{action "showUser" user}} class='user-profile-link'>
-                {{if nameFirst user.name (format-username username)}}
-                {{user-status user currentUser=currentUser}}
-              </a>
-            {{/if}}
-          </h1>
-          {{plugin-outlet name="user-card-after-username" args=(hash user=user showUser=(action "showUser" user)) tagName=''}}
-          {{#unless nameFirst}}
-            {{#if user.name}}
-              <h2 class='full-name'>{{user.name}}</h2>
-            {{/if}}
+        <h1 class="{{staff}} {{newUser}} {{if nameFirst "full-name" "username"}}">
+          {{#if user.profile_hidden}}
+            <span class="name-username-wrapper">
+              {{if nameFirst user.name (format-username username)}}
+            </span>
           {{else}}
-            <h2 class='username'>{{username}}</h2>
-          {{/unless}}
-          {{#if user.title}}
-            <h2>{{user.title}}</h2>
+            <a href="{{user.path}}" {{action "showUser" user}} class='user-profile-link'>
+              <span class="name-username-wrapper">
+                {{if nameFirst user.name (format-username username)}}
+              </span>
+              {{user-status user currentUser=currentUser}}
+            </a>
           {{/if}}
-          {{#if user.staged}}
-            <h2 class="staged">{{i18n 'user.staged'}}</h2>
+        </h1>
+        {{plugin-outlet name="user-card-after-username" args=(hash user=user showUser=(action "showUser" user)) tagName=''}}
+        {{#unless nameFirst}}
+          {{#if user.name}}
+            <h2 class='full-name'>{{user.name}}</h2>
           {{/if}}
-          {{plugin-outlet name="user-card-post-names" args=(hash user=user) tagName='div'}}
-        </span>
+        {{else}}
+          <h2 class='username'>{{username}}</h2>
+        {{/unless}}
+        {{#if user.title}}
+          <h2>{{user.title}}</h2>
+        {{/if}}
+        {{#if user.staged}}
+          <h2 class="staged">{{i18n 'user.staged'}}</h2>
+        {{/if}}
+        {{plugin-outlet name="user-card-post-names" args=(hash user=user) tagName='div'}}
       </div>
       <ul class="usercard-controls">
         {{#if user.can_send_private_message_to_user}}
@@ -221,4 +220,4 @@
     {{/if}}
 
   </div>
-{{/if}}
+{{/if}}
\ No newline at end of file
diff --git a/app/assets/stylesheets/common/components/user-card.scss b/app/assets/stylesheets/common/components/user-card.scss
index 6e2a5568aaa..1868d407dd6 100644
--- a/app/assets/stylesheets/common/components/user-card.scss
+++ b/app/assets/stylesheets/common/components/user-card.scss
@@ -43,6 +43,20 @@ $avatar_margin: -50px; // negative margin makes avatars extend above cards
   .first-row {
     .names {
       padding-left: 1.25em;
+
+      .user-profile-link {
+        display: flex;
+        align-items: center;
+      }
+
+      .d-icon {
+        margin: 0 0.25em;
+      }
+
+      .name-username-wrapper {
+        margin-right: 0;
+        flex: 0 1 auto;
+      }
       span {
         display: block;
       }