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

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;
     }
   }