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

• Updated:
- styles in ChatBlocks, ChatMutes, ChatRequests to not overflow container so now it scrolls

app/javascript/gabsocial/features/chat_conversation_blocked_accounts.js

@@ -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
+        <div className={[_s.d, _s.posAbs, _s.top60PX, _s.left0, _s.right0, _s.bottom0, _s.overflowYScroll].join(' ')}>
-          scrollKey='chat_blocked_accounts'
+          <ScrollableList
-          onLoadMore={this.handleLoadMore}
+            scrollKey='chat_blocked_accounts'
-          hasMore={hasMore}
+            onLoadMore={this.handleLoadMore}
-          isLoading={isLoading}
+            hasMore={hasMore}
-          showLoading={isLoading}
+            isLoading={isLoading}
-          emptyMessage={emptyMessage}
+            showLoading={isLoading}
-          placeholderComponent={AccountPlaceholder}
+            emptyMessage={emptyMessage}
-          placeholderCount={3}
+            placeholderComponent={AccountPlaceholder}
-        >
+            placeholderCount={3}
-          {
+          >
-            accountIds && accountIds.map((id) => (
+            {
-              <Account
+              accountIds && accountIds.map((id) => (
-                key={`blocked-accounts-${id}`}
+                <Account
-                id={id}
+                  key={`blocked-accounts-${id}`}
-                compact
+                  id={id}
-                actionIcon=''
+                  compact
-								onActionClick={() => this.props.onRemove(id)}
+                  actionIcon=''
-								actionTitle='Undo Chat Block'
+                  onActionClick={() => this.props.onRemove(id)}
-              />
+                  actionTitle='Undo Chat Block'
-            ))
+                />
-          }
+              ))
-        </ScrollableList>
+            }
+          </ScrollableList>
+        </div>
       </div>
     )
   }

app/javascript/gabsocial/features/chat_conversation_mutes.js

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

app/javascript/gabsocial/features/chat_conversation_requests.js

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