LogalDeveloper/owncast
0
Fork 0
Code Activity

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

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

Co-authored-by: janWilejan <>
This commit is contained in:
janWilejan
2023-07-11 20:07:58 +00:00
committed by GitHub
parent f6182229f5
commit 101174f71e
8 changed files with 46 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
web/components/chat/ChatSocialMessage/ChatSocialMessage.module.scss
View File

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

32
web/components/chat/ChatSocialMessage/ChatSocialMessage.tsx
View File

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