add left margin to items in userlist

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

@@ -1,6 +1,7 @@
 @import "/imports/ui/components/user-list/styles.scss";
 @import "/imports/ui/stylesheets/mixins/_scrollable";
 @import "/imports/ui/stylesheets/mixins/focus";
+@import "/imports/ui/stylesheets/variables/_all";
 
 .content {
   @extend %flex-column;
@@ -12,3 +13,7 @@
   @include elementFocus($list-item-bg-hover);
   @include scrollbox-vertical($user-list-bg);
 }
+
+.list {
+  margin-left: $md-padding-y;
+}

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

@@ -128,7 +128,7 @@ class UserMessages extends Component {
             component="div"
             className={cx(styles.chatsList)}
           >
-            <div ref={(ref) => { this._msgItems = ref; }}>
+            <div ref={(ref) => { this._msgItems = ref; }} className={styles.list}>
               {openChats.map(chat => (
                 <ChatListItem
                   isPublicChat={isPublicChat}

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

@@ -22,3 +22,7 @@
   overflow: hidden;
   flex-shrink: 1;
 }
+
+.list {
+  margin-left: $md-padding-y;
+}

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

@@ -204,7 +204,7 @@ class UserParticipants extends Component {
             component="div"
             className={cx(styles.participantsList)}
           >
-            <div ref={(ref) => { this.refScrollItems = ref; }}>
+            <div ref={(ref) => { this.refScrollItems = ref; }} className={styles.list}>
               {
                 users.map(user => (
                   <UserListItem