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/ChatActionMessage/ChatActionMessage.module.scss

@@ -1,6 +1,9 @@
+.chatActionPadding {
+  padding: 4px 1rem;
+}
+
 .chatAction {
   padding: 8px;
-	margin: 4px 1rem;
 	border-radius: 4px;
 	text-align: center;
 	font-size: 12px;

web/components/chat/ChatActionMessage/ChatActionMessage.tsx

@@ -8,5 +8,7 @@ export type ChatActionMessageProps = {
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const ChatActionMessage: FC<ChatActionMessageProps> = ({ body }) => (
-  <div dangerouslySetInnerHTML={{ __html: body }} className={styles.chatAction} />
+  <div className={styles.chatActionPadding}>
+    <div dangerouslySetInnerHTML={{ __html: body }} className={styles.chatAction} />
+  </div>
 );

web/components/chat/ChatContainer/ChatContainer.module.scss

@@ -45,7 +45,6 @@
   flex-grow: 1;
   overflow-y: scroll;
   overflow-x: hidden;
-  margin-bottom: 5px;
   overscroll-behavior: contain;
 }
 

web/components/chat/ChatModeratorNotification/ChatModeratorNotification.module.scss

@@ -3,7 +3,6 @@
 .chatModerationNotification {
   background-color: var(--theme-background-primary);
   color: var(--theme-color-components-chat-text);
-  margin: 5px;
   padding: 10px;
 	font-size: var(--chat-message-text-size);
 

web/components/chat/ChatSocialMessage/ChatSocialMessage.module.scss

@@ -1,3 +1,7 @@
+.followerPadding {
+  padding: 0.5em;
+}
+
 .follower {
   border-color: rgb(0 0 0 / 30%);
   border-width: 1px;
@@ -5,7 +9,6 @@
   padding: 10px;
   border-radius: var(--theme-rounded-corners);
   background-color: var(--theme-color-background-main);
-  margin: 0.5em;
 
   &:hover {
     border-color: var(--theme-text-link);

web/components/chat/ChatSocialMessage/ChatSocialMessage.tsx

@@ -39,22 +39,24 @@ export const ChatSocialMessage: FC<ChatSocialMessageProps> = ({ message }) => {
   }
 
   return (
-    <div className={cn([styles.follower, 'chat-message_social'])}>
-      <a href={link} target="_blank" rel="noreferrer">
-        <Row wrap={false}>
-          <Col span={6} className={styles.avatarColumn}>
-            <Avatar src={image} alt="Avatar" className={styles.avatar} size="large">
-              {title.charAt(0).toUpperCase()}
-            </Avatar>
+    <div className={styles.followerPadding}>
+      <div className={cn([styles.follower, 'chat-message_social'])}>
+        <a href={link} target="_blank" rel="noreferrer">
+          <Row wrap={false}>
+            <Col span={6} className={styles.avatarColumn}>
+              <Avatar src={image} alt="Avatar" className={styles.avatar} size="large">
+                {title.charAt(0).toUpperCase()}
+              </Avatar>
 
-            <Icon className={styles.icon} />
-          </Col>
-          <Col>
-            <Row className={styles.account}>{title}</Row>
-            <Row className={styles.body} dangerouslySetInnerHTML={{ __html: body }} />
-          </Col>
-        </Row>
-      </a>
+              <Icon className={styles.icon} />
+            </Col>
+            <Col>
+              <Row className={styles.account}>{title}</Row>
+              <Row className={styles.body} dangerouslySetInnerHTML={{ __html: body }} />
+            </Col>
+          </Row>
+        </a>
+      </div>
     </div>
   );
 };

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