UX: show the user status next to the username in the group's view (#36482)

Instead of on its own line.

**BEFORE**

<img width="1552" height="1140" alt="CleanShot 2025-12-05 at 16 38 17"
src="https://github.com/user-attachments/assets/47160d1c-12bf-428a-8d66-42f4bd8475d6"
/>

**AFTER**

<img width="1552" height="1140" alt="CleanShot 2025-12-05 at 16 38 48"
src="https://github.com/user-attachments/assets/e73e3b7b-6e6b-4041-87db-b777014414e2"
/>

app/assets/stylesheets/common/components/user-info.scss

@@ -19,22 +19,54 @@
     }
 
     .name-line {
-      > a {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 0 0.5em;
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0 0.5em;
+
+      a {
         color: var(--primary-high);
       }
 
-      .name,
-      .username {
-        width: 100%;
+      .username-wrapper {
+        display: flex;
+        align-items: baseline;
+        gap: 0.35em;
 
+        .username {
+          font-weight: bold;
+
+          @include ellipsis;
+        }
+      }
+
+      .name-wrapper .name {
         @include ellipsis;
       }
 
-      span:first-child {
-        font-weight: bold;
+      // When name should appear first (site setting)
+      &--name-first:not(&--show-status) {
+        .username-wrapper {
+          order: 1;
+        }
+
+        .name-wrapper .name {
+          font-weight: bold;
+        }
+
+        .username-wrapper .username {
+          font-weight: normal;
+        }
+      }
+
+      // When showing status: username+status on first line, name on second
+      &--show-status {
+        .username-wrapper {
+          width: 100%;
+        }
+
+        .name-wrapper {
+          width: 100%;
+        }
       }
     }
 

frontend/discourse/app/components/user-info.gjs

@@ -9,6 +9,7 @@ import PluginOutlet from "discourse/components/plugin-outlet";
 import UserAvatarFlair from "discourse/components/user-avatar-flair";
 import UserStatusMessage from "discourse/components/user-status-message";
 import avatar from "discourse/helpers/avatar";
+import concatClass from "discourse/helpers/concat-class";
 import formatUsername from "discourse/helpers/format-username";
 import lazyHash from "discourse/helpers/lazy-hash";
 import discourseComputed from "discourse/lib/decorators";
@@ -59,34 +60,43 @@ export default class UserInfo extends Component {
       </div>
     {{/if}}
     <div class="user-detail">
-      <div class="name-line">
-        {{#if this.includeLink}}
-          <a
-            href={{this.userPath}}
-            data-user-card={{@user.username}}
-            role={{if @headingLevel "heading"}}
-            aria-level={{@headingLevel}}
-          >
-            <span class={{if this.nameFirst "name" "username"}}>
-              {{if this.nameFirst @user.name (formatUsername @user.username)}}
-            </span>
-            <span class={{if this.nameFirst "username" "name"}}>
-              {{if this.nameFirst (formatUsername @user.username) @user.name}}
-            </span>
-          </a>
-        {{else}}
-          <span class={{if this.nameFirst "name" "username"}}>
-            {{if this.nameFirst @user.name (formatUsername @user.username)}}
+      <div
+        class={{concatClass
+          "name-line"
+          (if @showStatus "--show-status")
+          (if this.nameFirst "--name-first")
+        }}
+      >
+        <span class="username-wrapper">
+          {{#if this.includeLink}}
+            <a
+              href={{this.userPath}}
+              data-user-card={{@user.username}}
+              role={{if @headingLevel "heading"}}
+              aria-level={{@headingLevel}}
+            >
+              <span class="username">{{formatUsername @user.username}}</span>
+            </a>
+          {{else}}
+            <span class="username">{{formatUsername @user.username}}</span>
+          {{/if}}
+          {{#if (and @showStatus @user.status)}}
+            <UserStatusMessage
+              @status={{@user.status}}
+              @showDescription={{@showStatusDescription}}
+            />
+          {{/if}}
+        </span>
+        {{#if @user.name}}
+          <span class="name-wrapper">
+            {{#if this.includeLink}}
+              <a href={{this.userPath}} data-user-card={{@user.username}}>
+                <span class="name">{{@user.name}}</span>
+              </a>
+            {{else}}
+              <span class="name">{{@user.name}}</span>
+            {{/if}}
           </span>
-          <span class={{if this.nameFirst "username" "name"}}>
-            {{if this.nameFirst (formatUsername @user.username) @user.name}}
-          </span>
-        {{/if}}
-        {{#if (and @showStatus @user.status)}}
-          <UserStatusMessage
-            @status={{@user.status}}
-            @showDescription={{@showStatusDescription}}
-          />
         {{/if}}
         <PluginOutlet
           @name="after-user-name"