Mirroristas/owncast
2
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-10-10 19:16:02 +00:00
Code Issues Packages Projects Releases Wiki 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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 46 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

2
web/components/chat/ChatActionMessage/ChatActionMessage.tsx
View File

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

1
web/components/chat/ChatContainer/ChatContainer.module.scss
View File

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

1
web/components/chat/ChatModeratorNotification/ChatModeratorNotification.module.scss
View File

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

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

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

@ -39,6 +39,7 @@ export const ChatSocialMessage: FC<ChatSocialMessageProps> = ({ message }) => {
}
return (
<div className={styles.followerPadding}>
<div className={cn([styles.follower, 'chat-message_social'])}>
<a href={link} target="_blank" rel="noreferrer">
<Row wrap={false}>
@ -56,5 +57,6 @@ export const ChatSocialMessage: FC<ChatSocialMessageProps> = ({ message }) => {
</Row>
</a>
</div>
</div>
);
};

7
web/components/chat/ChatSystemMessage/ChatSystemMessage.module.scss
View File

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

2
web/components/chat/ChatSystemMessage/ChatSystemMessage.tsx
View File

@ -18,6 +18,7 @@ export const ChatSystemMessage: FC<ChatSystemMessageProps> = ({
},
highlightString,
}) => (
<div className={styles.chatSystemMessagePadding}>
<div className={cn([styles.chatSystemMessage, 'chat-message_system'])}>
<div className={styles.user}>
<span className={styles.userName}>{displayName}</span>
@ -31,4 +32,5 @@ export const ChatSystemMessage: FC<ChatSystemMessageProps> = ({
]}
/>
</div>
</div>
);