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