Modal improvements for members

web/react/components/admin_console/user_item.jsx

@@ -212,7 +212,8 @@ export default class UserItem extends React.Component {
         }
 
         return (
-            <div className='row member-div'>
+            <tr>
+                <td className='row member-div'>
                     <img
                         className='post-profile-img pull-left'
                         src={`/api/v1/users/${user.id}/image?time=${user.update_at}&${Utils.getSessionIndex()}`}
@@ -255,7 +256,8 @@ export default class UserItem extends React.Component {
                         </ul>
                     </div>
                     {serverError}
-            </div>
+                </td>
+            </tr>
         );
     }
 }

web/react/components/channel_invite_modal.jsx

@@ -54,6 +54,16 @@ export default class ChannelInviteModal extends React.Component {
             loading
         };
     }
+    onShow() {
+        if ($(window).width() > 768) {
+            $(ReactDOM.findDOMNode(this.refs.modalBody)).perfectScrollbar();
+        }
+    }
+    componentDidUpdate(prevProps) {
+        if (this.props.show && !prevProps.show) {
+            this.onShow();
+        }
+    }
     componentWillReceiveProps(nextProps) {
         if (!this.props.show && nextProps.show) {
             ChannelStore.addExtraInfoChangeListener(this.onListenerChange);
@@ -103,6 +113,11 @@ export default class ChannelInviteModal extends React.Component {
         );
     }
     render() {
+        var maxHeight = 1000;
+        if (Utils.windowHeight() <= 1200) {
+            maxHeight = Utils.windowHeight() - 300;
+        }
+
         var inviteError = null;
         if (this.state.inviteError) {
             inviteError = (<label className='has-error control-label'>{this.state.inviteError}</label>);
@@ -129,13 +144,17 @@ export default class ChannelInviteModal extends React.Component {
 
         return (
             <Modal
+                dialogClassName='more-modal'
                 show={this.props.show}
                 onHide={this.props.onModalDismissed}
             >
                 <Modal.Header closeButton={true}>
                     <Modal.Title>{'Add New Members to '}<span className='name'>{this.state.channelName}</span></Modal.Title>
                 </Modal.Header>
-                <Modal.Body>
+                <Modal.Body
+                    ref='modalBody'
+                    style={{maxHeight}}
+                >
                     {inviteError}
                     {content}
                 </Modal.Body>

web/react/components/channel_members_modal.jsx

@@ -70,6 +70,16 @@ export default class ChannelMembersModal extends React.Component {
             channelName
         };
     }
+    onShow() {
+        if ($(window).width() > 768) {
+            $(ReactDOM.findDOMNode(this.refs.modalBody)).perfectScrollbar();
+        }
+    }
+    componentDidUpdate(prevProps) {
+        if (this.props.show && !prevProps.show) {
+            this.onShow();
+        }
+    }
     componentWillReceiveProps(nextProps) {
         if (!this.props.show && nextProps.show) {
             ChannelStore.addExtraInfoChangeListener(this.onChange);
@@ -128,6 +138,11 @@ export default class ChannelMembersModal extends React.Component {
          );
     }
     render() {
+        var maxHeight = 1000;
+        if (Utils.windowHeight() <= 1200) {
+            maxHeight = Utils.windowHeight() - 300;
+        }
+
         const currentMember = ChannelStore.getCurrentMember();
         let isAdmin = false;
         if (currentMember) {
@@ -137,6 +152,7 @@ export default class ChannelMembersModal extends React.Component {
         return (
             <div>
                 <Modal
+                    dialogClassName='more-modal'
                     show={this.props.show}
                     onHide={this.props.onModalDismissed}
                 >
@@ -153,8 +169,10 @@ export default class ChannelMembersModal extends React.Component {
                             <i className='glyphicon glyphicon-envelope'/>{' Add New Members'}
                         </a>
                     </Modal.Header>
-                    <Modal.Body>
-                        <div className='col-sm-12'>
+                    <Modal.Body
+                        ref='modalBody'
+                        style={{maxHeight}}
+                    >
                         <div className='team-member-list'>
                             <MemberList
                                 memberList={this.state.memberList}
@@ -162,7 +180,6 @@ export default class ChannelMembersModal extends React.Component {
                                 handleRemove={this.handleRemove}
                             />
                         </div>
-                        </div>
                     </Modal.Body>
                     <Modal.Footer>
                         <button

web/react/components/member_list.jsx

@@ -15,7 +15,7 @@ export default class MemberList extends React.Component {
             members = this.props.memberList;
         }
 
-        var message = '';
+        var message = null;
         if (members.length === 0) {
             message = <tr><td>No users to add.</td></tr>;
         }

web/react/components/member_list_team_item.jsx

@@ -166,7 +166,8 @@ export default class MemberListTeamItem extends React.Component {
         }
 
         return (
-            <div className='row member-div'>
+            <tr>
+                <td className='row member-div'>
                     <img
                         className='post-profile-img pull-left'
                         src={`/api/v1/users/${user.id}/image?time=${timestamp}&${Utils.getSessionIndex()}`}
@@ -199,7 +200,8 @@ export default class MemberListTeamItem extends React.Component {
                         </ul>
                     </div>
                     {serverError}
-            </div>
+                </td>
+            </tr>
         );
     }
 }

web/react/components/team_members.jsx

@@ -79,7 +79,7 @@ export default class TeamMembers extends React.Component {
 
         return (
             <div
-                className='modal fade'
+                className='modal fade more-modal'
                 ref='modal'
                 id='team_members'
                 tabIndex='-1'
@@ -106,13 +106,11 @@ export default class TeamMembers extends React.Component {
                             ref='modalBody'
                             className='modal-body'
                         >
-                            <div className='channel-settings'>
                             <div className='team-member-list'>
                                 {renderMembers}
                             </div>
                             {serverError}
                         </div>
-                        </div>
                         <div className='modal-footer'>
                             <button
                                 type='button'

web/sass-files/sass/partials/_modal.scss

@@ -174,7 +174,7 @@
 				td {
 					width: 100%;
 					white-space: nowrap;
-					overflow: hidden;
+					@include legacy-pie-clearfix;
 					text-overflow: ellipsis;
 					padding: 8px 8px 8px 15px;
 					&.td--action {