PLT-4609 - Fixing list modals on mobile (#4453)

* PLT-4609 - Fixing list modals on mobile

Removing style prop

Removing utils import

PLT-4609 - Fixing list modals on mobile

Removing style prop

Removing utils import

Removing Utils

Removing memberlist style prop

Removing blank line

* Removing height code from team members modal

webapp/components/channel_invite_modal.jsx

@@ -11,7 +11,6 @@ import TeamStore from 'stores/team_store.jsx';
 
 import {searchUsers} from 'actions/user_actions.jsx';
 
-import * as Utils from 'utils/utils.jsx';
 import * as AsyncClient from 'utils/async_client.jsx';
 
 import React from 'react';
@@ -133,13 +132,8 @@ export default class ChannelInviteModal extends React.Component {
         if (this.state.loading) {
             content = (<LoadingScreen/>);
         } else {
-            let maxHeight = 1000;
-            if (Utils.windowHeight() <= 1200) {
-                maxHeight = Utils.windowHeight() - 300;
-            }
             content = (
                 <SearchableUserList
-                    style={{maxHeight}}
                     users={this.state.users}
                     usersPerPage={USERS_PER_PAGE}
                     total={this.state.total}

webapp/components/channel_members_modal.jsx

@@ -13,7 +13,6 @@ import {removeUserFromChannel} from 'actions/channel_actions.jsx';
 
 import * as AsyncClient from 'utils/async_client.jsx';
 import * as UserAgent from 'utils/user_agent.jsx';
-import * as Utils from 'utils/utils.jsx';
 
 import React from 'react';
 import {Modal} from 'react-bootstrap';
@@ -144,11 +143,6 @@ export default class ChannelMembersModal extends React.Component {
         if (this.state.loading) {
             content = (<LoadingScreen/>);
         } else {
-            let maxHeight = 1000;
-            if (Utils.windowHeight() <= 1200) {
-                maxHeight = Utils.windowHeight() - 300;
-            }
-
             let removeButton = null;
             if (this.props.isAdmin) {
                 removeButton = [this.createRemoveMemberButton];
@@ -156,7 +150,6 @@ export default class ChannelMembersModal extends React.Component {
 
             content = (
                 <SearchableUserList
-                    style={{maxHeight}}
                     users={this.state.users}
                     usersPerPage={USERS_PER_PAGE}
                     total={this.state.total}

webapp/components/member_list_team.jsx

@@ -122,7 +122,6 @@ export default class MemberListTeam extends React.Component {
 
         return (
             <SearchableUserList
-                style={this.props.style}
                 users={usersToDisplay}
                 usersPerPage={USERS_PER_PAGE}
                 total={this.state.total}
@@ -136,6 +135,5 @@ export default class MemberListTeam extends React.Component {
 }
 
 MemberListTeam.propTypes = {
-    style: React.PropTypes.object,
     isAdmin: React.PropTypes.bool
 };

webapp/components/more_channels.jsx

@@ -96,11 +96,6 @@ export default class MoreChannels extends React.Component {
     }
 
     render() {
-        let maxHeight = 1000;
-        if (Utils.windowHeight() <= 1200) {
-            maxHeight = Utils.windowHeight() - 300;
-        }
-
         let serverError;
         if (this.state.serverError) {
             serverError = <div className='form-group has-error'><label className='control-label'>{this.state.serverError}</label></div>;
@@ -204,10 +199,7 @@ export default class MoreChannels extends React.Component {
                                 onModalDismissed={() => this.setState({showNewChannelModal: false})}
                             />
                         </div>
-                        <div
-                            className='modal-body'
-                            style={{maxHeight}}
-                        >
+                        <div className='modal-body'>
                             {moreChannels}
                             {serverError}
                         </div>

webapp/components/more_direct_channels.jsx

@@ -12,7 +12,6 @@ import TeamStore from 'stores/team_store.jsx';
 
 import * as AsyncClient from 'utils/async_client.jsx';
 import * as UserAgent from 'utils/user_agent.jsx';
-import * as Utils from 'utils/utils.jsx';
 import Constants from 'utils/constants.jsx';
 
 import React from 'react';
@@ -182,11 +181,6 @@ export default class MoreDirectChannels extends React.Component {
     }
 
     render() {
-        let maxHeight = 1000;
-        if (Utils.windowHeight() <= 1200) {
-            maxHeight = Utils.windowHeight() - 300;
-        }
-
         let teamToggle;
         if (global.window.mm_config.RestrictDirectMessage === 'any') {
             teamToggle = (
@@ -242,7 +236,6 @@ export default class MoreDirectChannels extends React.Component {
                     {teamToggle}
                     <SearchableUserList
                         key={'moreDirectChannelsList_' + this.state.listType}
-                        style={{maxHeight}}
                         users={this.state.users}
                         usersPerPage={USERS_PER_PAGE}
                         nextPage={this.nextPage}

webapp/components/searchable_user_list.jsx

@@ -156,10 +156,7 @@ export default class SearchableUserList extends React.Component {
         }
 
         return (
-            <div
-                className='filtered-user-list'
-                style={this.props.style}
-            >
+            <div className='filtered-user-list'>
                 <div className='filter-row'>
                     <div className='col-xs-9 col-sm-5'>
                         <input
@@ -229,6 +226,5 @@ SearchableUserList.propTypes = {
     actions: React.PropTypes.arrayOf(React.PropTypes.func),
     actionProps: React.PropTypes.object,
     actionUserProps: React.PropTypes.object,
-    style: React.PropTypes.object,
     focusOnMount: React.PropTypes.bool.isRequired
 };

webapp/components/team_members_modal.jsx

@@ -3,7 +3,6 @@
 
 import MemberListTeam from './member_list_team.jsx';
 import TeamStore from 'stores/team_store.jsx';
-import * as Utils from 'utils/utils.jsx';
 
 import {FormattedMessage} from 'react-intl';
 
@@ -46,11 +45,6 @@ export default class TeamMembersModal extends React.Component {
             teamDisplayName = this.state.team.display_name;
         }
 
-        let maxHeight = 1000;
-        if (Utils.windowHeight() <= 1200) {
-            maxHeight = Utils.windowHeight() - 300;
-        }
-
         return (
             <Modal
                 dialogClassName='more-modal'
@@ -71,7 +65,6 @@ export default class TeamMembersModal extends React.Component {
                 </Modal.Header>
                 <Modal.Body>
                     <MemberListTeam
-                        style={{maxHeight}}
                         isAdmin={this.props.isAdmin}
                     />
                 </Modal.Body>

webapp/sass/responsive/_mobile.scss

@@ -9,8 +9,6 @@
     }
 
     .filtered-user-list {
-        max-height: 65vh !important;
-
         .filter-button {
             .btn {
                 width: 100%;
@@ -1309,6 +1307,12 @@
 
     .app__body {
         .modal {
+            &.more-channel__modal {
+                .modal-body {
+                    padding-bottom: 35px;
+                }
+            }
+
             .settings-modal {
                 &.display--content {
                     .modal-body {
@@ -1318,6 +1322,7 @@
 
                 .modal-body {
                     max-height: 70%;
+                    padding-bottom: 0;
                 }
 
                 .settings-table {