Updated styles in ChatBlocks, ChatMutes, ChatRequests to not overflow container

• Updated:
- styles in ChatBlocks, ChatMutes, ChatRequests to not overflow container so now it scrolls
This commit is contained in:
mgabdev 2020-12-22 23:48:37 -05:00
parent 0e7a336e5c
commit 0e860dd563
3 changed files with 34 additions and 28 deletions

View File

@ -39,33 +39,35 @@ class ChatConversationBlockedAccounts extends ImmutablePureComponent {
const emptyMessage = intl.formatMessage(messages.empty)
return (
<div className={[_s.d, _s.w100PC, _s.boxShadowNone].join(' ')}>
<div className={[_s.d, _s.w100PC, _s.h100PC, _s.overflowHidden, _s.boxShadowNone].join(' ')}>
<div className={[_s.d, _s.h60PX, _s.w100PC, _s.px10, _s.py10, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
<BlockHeading title={intl.formatMessage(messages.blocks)} />
</div>
<ScrollableList
scrollKey='chat_blocked_accounts'
onLoadMore={this.handleLoadMore}
hasMore={hasMore}
isLoading={isLoading}
showLoading={isLoading}
emptyMessage={emptyMessage}
placeholderComponent={AccountPlaceholder}
placeholderCount={3}
>
{
accountIds && accountIds.map((id) => (
<Account
key={`blocked-accounts-${id}`}
id={id}
compact
actionIcon=''
onActionClick={() => this.props.onRemove(id)}
actionTitle='Undo Chat Block'
/>
))
}
</ScrollableList>
<div className={[_s.d, _s.posAbs, _s.top60PX, _s.left0, _s.right0, _s.bottom0, _s.overflowYScroll].join(' ')}>
<ScrollableList
scrollKey='chat_blocked_accounts'
onLoadMore={this.handleLoadMore}
hasMore={hasMore}
isLoading={isLoading}
showLoading={isLoading}
emptyMessage={emptyMessage}
placeholderComponent={AccountPlaceholder}
placeholderCount={3}
>
{
accountIds && accountIds.map((id) => (
<Account
key={`blocked-accounts-${id}`}
id={id}
compact
actionIcon=''
onActionClick={() => this.props.onRemove(id)}
actionTitle='Undo Chat Block'
/>
))
}
</ScrollableList>
</div>
</div>
)
}

View File

@ -7,11 +7,13 @@ class ChatConversationMutes extends React.PureComponent {
render() {
return (
<div className={[_s.d, _s.w100PC, _s.boxShadowNone].join(' ')}>
<div className={[_s.d, _s.w100PC, _s.h100PC, _s.overflowHidden, _s.boxShadowNone].join(' ')}>
<div className={[_s.d, _s.h60PX, _s.w100PC, _s.px10, _s.py10, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
<BlockHeading title={'Muted Chat Conversations'} />
</div>
<ChatConversationsList source='muted' />
<div className={[_s.d, _s.posAbs, _s.top60PX, _s.left0, _s.right0, _s.bottom0, _s.overflowYScroll].join(' ')}>
<ChatConversationsList source='muted' />
</div>
</div>
)
}

View File

@ -7,11 +7,13 @@ class ChatConversationRequests extends React.PureComponent {
render() {
return (
<div className={[_s.d, _s.w100PC, _s.boxShadowNone].join(' ')}>
<div className={[_s.d, _s.w100PC, _s.h100PC, _s.overflowHidden, _s.boxShadowNone].join(' ')}>
<div className={[_s.d, _s.h60PX, _s.w100PC, _s.px10, _s.py10, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
<BlockHeading title={'Message Requests'} />
</div>
<ChatConversationsList source='requested' />
<div className={[_s.d, _s.posAbs, _s.top60PX, _s.left0, _s.right0, _s.bottom0, _s.overflowYScroll].join(' ')}>
<ChatConversationsList source='requested' />
</div>
</div>
)
}