fix(chat): tweak layouts of chat user badges. Closes #3009

web/components/chat/ChatJoinMessage/ChatJoinMessage.module.scss

@@ -1,8 +1,14 @@
 .root {
+  display: inline-flex;
   padding: 10px 0px;
   color: var(--theme-color-components-chat-text);
   font-weight: 400;
   font-size: var(--chat-message-text-size);
+
+  .moderatorBadge,
+  .user {
+    margin-right: 5px;
+  }
 }
 
 .icon {

web/components/chat/ChatJoinMessage/ChatJoinMessage.tsx

@@ -31,11 +31,11 @@ export const ChatJoinMessage: FC<ChatJoinMessageProps> = ({
         </span>
         <span className={styles.user}>{displayName}</span>
         {isAuthorModerator && (
-          <span>
+          <span className={styles.moderatorBadge}>
             <ModerationBadge userColor={userColor} />
           </span>
         )}
-      </span>{' '}
+      </span>
       joined the chat.
     </div>
   );

web/components/chat/ChatUserBadge/ChatUserBadge.module.scss

@@ -10,6 +10,5 @@
   justify-content: center;
   align-items: center;
   overflow: hidden;
-  margin-left: 5px;
   font-size: 0.75rem;
 }

web/components/chat/ChatUserMessage/ChatUserMessage.module.scss

@@ -19,6 +19,10 @@ $p-v-size: 2px;
     font-weight: 600;
   }
 
+  .userBadges {
+    margin-left: 3px;
+  }
+
   .message {
     overflow: hidden;
     overflow-wrap: anywhere;

web/components/chat/ChatUserMessage/ChatUserMessage.tsx

@@ -101,7 +101,7 @@ export const ChatUserMessage: FC<ChatUserMessageProps> = ({
           <UserTooltip user={user}>
             <div className={styles.user} style={{ color }}>
               <span className={styles.userName}>{displayName}</span>
-              {badgeNodes}
+              <span className={styles.userBadges}>{badgeNodes}</span>
             </div>
           </UserTooltip>
         )}