replace margins with padding in the chat container (#3165)

Virtuoso can't calculate the size of elements that have margins. This causes
strange behaviour with scrolling in chat.

Co-authored-by: janWilejan <>

web/components/chat/ChatSystemMessage/ChatSystemMessage.module.scss

@@ -1,3 +1,8 @@
+.chatSystemMessagePadding {
+  padding: 5px;
+  padding-bottom: 10px;
+}
+
 .chatSystemMessage {
   background: var(--theme-color-background-main);
   background: linear-gradient(
@@ -6,8 +11,6 @@
     rgb(65 28 139) 40%,
     rgb(71 50 133) 80%
   );
-  margin: 5px;
-  margin-bottom: 10px;
   border-radius: 5px;
   border-width: 1px;
   border-style: solid;

web/components/chat/ChatSystemMessage/ChatSystemMessage.tsx

@@ -18,17 +18,19 @@ export const ChatSystemMessage: FC<ChatSystemMessageProps> = ({
   },
   highlightString,
 }) => (
-  <div className={cn([styles.chatSystemMessage, 'chat-message_system'])}>
-    <div className={styles.user}>
-      <span className={styles.userName}>{displayName}</span>
+  <div className={styles.chatSystemMessagePadding}>
+    <div className={cn([styles.chatSystemMessage, 'chat-message_system'])}>
+      <div className={styles.user}>
+        <span className={styles.userName}>{displayName}</span>
+      </div>
+      <Interweave
+        className={styles.message}
+        content={body}
+        matchers={[
+          new UrlMatcher('url', { customTLDs: ['online'] }),
+          new ChatMessageHighlightMatcher('highlight', { highlightString }),
+        ]}
+      />
     </div>
-    <Interweave
-      className={styles.message}
-      content={body}
-      matchers={[
-        new UrlMatcher('url', { customTLDs: ['online'] }),
-        new ChatMessageHighlightMatcher('highlight', { highlightString }),
-      ]}
-    />
   </div>
 );