Merge pull request #4503 from oswaldoacauan/user-list-scroll-bg

[HTML5] Fix user-list scroll shadow and message list max height

bigbluebutton-html5/imports/ui/components/user-list/styles.scss

@@ -7,6 +7,7 @@
 
 $unread-messages-bg: $color-danger;
 $user-list-text: $color-gray;
+$user-list-bg: #F3F6F9;
 
 $user-thumbnail-border: $color-gray-light;
 $user-thumbnail-text: $user-thumbnail-border;
@@ -86,6 +87,7 @@ $user-icons-color-hover: $color-gray;
 }
 
 .messages {
+  max-height: 30vh;
 }
 
 .participants {

bigbluebutton-html5/imports/ui/components/user-list/user-list-content/styles.scss

@@ -3,11 +3,11 @@
 
 .content {
   @extend %flex-column;
-  flex-grow: 9;
+  flex-grow: 1;
   overflow: hidden;
 }
 
 .scrollableList {
   @extend %customListFocus;
-  @include scrollbox-vertical();
+  @include scrollbox-vertical($user-list-bg);
 }

bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-messages/component.jsx

@@ -126,7 +126,7 @@ class UserMessages extends Component {
             transitionEnterTimeout={0}
             transitionLeaveTimeout={0}
             component="div"
-            className={cx(styles.chatsList, styles.scrollableList)}
+            className={cx(styles.chatsList)}
           >
             <div ref={(ref) => { this._msgItems = ref; }}>
               {openChats.map(chat => (

bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/component.jsx

@@ -203,7 +203,7 @@ class UserParticipants extends Component {
             transitionEnterTimeout={0}
             transitionLeaveTimeout={0}
             component="div"
-            className={cx(styles.participantsList, styles.scrollableList)}
+            className={cx(styles.participantsList)}
           >
             <div ref={(ref) => { this.refScrollItems = ref; }}>
               {