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