UX: Fix alignment issues around user status (#26491)

Minor changes but they 1. correct the html structure (no divs in spans) 2. unify the margins

app/assets/javascripts/discourse/app/widgets/post-user-status.js

@@ -9,7 +9,7 @@ createWidget("post-user-status", {
     return [
       new RenderGlimmer(
         this,
-        "div",
+        "span",
         hbs`<UserStatusMessage @status={{@data.attrs}} />`,
         {
           attrs,

app/assets/javascripts/float-kit/addon/components/d-tooltip.gjs

@@ -78,7 +78,7 @@ export default class DTooltip extends Component {
       {{this.registerTrigger (this.allowedProperties)}}
       ...attributes
     >
-      <div class="fk-d-tooltip__trigger-container">
+      <span class="fk-d-tooltip__trigger-container">
         {{#if (has-block "trigger")}}
           {{yield this.componentArgs to="trigger"}}
         {{else}}
@@ -91,7 +91,7 @@ export default class DTooltip extends Component {
             <span class="fk-d-tooltip__label">{{@label}}</span>
           {{/if}}
         {{/if}}
-      </div>
+      </span>
     </span>
 
     {{#if this.tooltipInstance.expanded}}

app/assets/stylesheets/common/base/sidebar-section-link.scss

@@ -62,6 +62,9 @@
     }
 
     .sidebar-section-link-content-text {
+      align-items: center;
+      display: inline-flex;
+
       @include ellipsis;
 
       .emoji {

app/assets/stylesheets/common/base/topic-post.scss

@@ -59,9 +59,9 @@
     font-weight: bold;
   }
 
-  span {
+  > span {
     font-size: var(--font-0);
-    margin-right: 8px;
+    margin-right: 0.33em;
     display: inline-block;
     @include ellipsis;
     vertical-align: middle;

app/assets/stylesheets/common/float-kit/d-tooltip.scss

@@ -27,6 +27,10 @@
     .touch & {
       @include unselectable;
     }
+
+    &-container {
+      display: flex;
+    }
   }
 
   &.-animated {

plugins/chat/assets/javascripts/discourse/components/chat/message/info.gjs

@@ -135,9 +135,9 @@ export default class ChatMessageInfo extends Component {
           >
             <span class="chat-message-info__username__name">{{this.name}}</span>
             {{#if this.showStatus}}
-              <div class="chat-message-info__status">
+              <span class="chat-message-info__status">
                 <UserStatusMessage @status={{@message.user.status}} />
-              </div>
+              </span>
             {{/if}}
           </span>
         {{/if}}

plugins/chat/assets/stylesheets/common/chat-message-info.scss

@@ -58,8 +58,7 @@
 
 .chat-message-info__status {
   display: flex;
-  margin-left: 0.2rem;
-  margin-right: 0.2rem;
+  margin-inline: 0.33rem;
 
   .emoji {
     width: 16px;

plugins/chat/assets/stylesheets/common/sidebar-extensions.scss

@@ -153,8 +153,8 @@
   }
 
   .sidebar-section-link-content-text {
-    .user-status {
-      margin-left: 0.3em;
+    .user-status-message {
+      margin-left: 0.33em;
     }
   }