fix: add spacing between user badges. Closes #3247

web/.stylelintrc.json

@@ -3,6 +3,7 @@
 	"rules": {
 		"selector-class-pattern": null,
 		"no-descending-specificity": null,
-		"selector-pseudo-class-no-unknown": null
+		"selector-pseudo-class-no-unknown": null,
+		"scss/at-extend-no-missing-placeholder": null
 	}
 }

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

@@ -1,14 +1,14 @@
 .badge {
   color: white;
   background-color: var(--color-owncast-palette-0);
-  height: 18px;
-  width: 18px;
-  border-radius: calc(0.3 * var(--theme-rounded-corners));
+  height: 16px;
+  width: 16px;
+  border-radius: calc(0.4 * var(--theme-rounded-corners));
   text-align: center;
   padding: 2px;
   display: inline-flex;
   justify-content: center;
   align-items: center;
   overflow: hidden;
-  font-size: 0.75rem;
+  font-size: 0.65rem;
 }

web/components/chat/ChatUserBadge/ChatUserBadge.tsx

@@ -1,4 +1,5 @@
 import React, { FC } from 'react';
+import cn from 'classnames';
 import styles from './ChatUserBadge.module.scss';
 
 export type ChatUserBadgeProps = {
@@ -12,7 +13,7 @@ export const ChatUserBadge: FC<ChatUserBadgeProps> = ({ badge, userColor, title
   const style = { color };
 
   return (
-    <span style={style} className={styles.badge} title={title}>
+    <span style={style} className={cn([styles.badge, 'chat-user-badge'])} title={title}>
       {badge}
     </span>
   );

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

@@ -27,12 +27,20 @@ $p-v-size: 2px;
   }
 
   .repeatUser {
+    // nolint: scss/at-extend-no-missing-placeholder
     @extend .user;
+
     display: none;
   }
 
   .userBadges {
     margin-left: 3px;
+    display: flex;
+    justify-content: space-between;
+
+    > * {
+      margin-left: 3px;
+    }
   }
 
   .message {