Multiple UI Improvements

web/react/components/access_history_modal.jsx

@@ -32,9 +32,11 @@ export default class AccessHistoryModal extends React.Component {
     onShow() {
         AsyncClient.getAudits();
 
-        $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 50);
         if ($(window).width() > 768) {
             $(ReactDOM.findDOMNode(this.refs.modalBody)).perfectScrollbar();
+            $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 200);
+        } else {
+            $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 150);
         }
     }
     onHide() {

web/react/components/activity_log_modal.jsx

@@ -51,9 +51,11 @@ export default class ActivityLogModal extends React.Component {
     onShow() {
         AsyncClient.getSessions();
 
-        $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 50);
         if ($(window).width() > 768) {
             $(ReactDOM.findDOMNode(this.refs.modalBody)).perfectScrollbar();
+            $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 200);
+        } else {
+            $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 150);
         }
     }
     onHide() {

web/react/components/channel_invite_modal.jsx

@@ -61,6 +61,9 @@ export default class ChannelInviteModal extends React.Component {
     onShow() {
         if ($(window).width() > 768) {
             $(ReactDOM.findDOMNode(this.refs.modalBody)).perfectScrollbar();
+            $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 200);
+        } else {
+            $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 150);
         }
     }
     componentDidUpdate(prevProps) {
@@ -139,11 +142,10 @@ export default class ChannelInviteModal extends React.Component {
                 onHide={this.props.onHide}
             >
                 <Modal.Header closeButton={true}>
-                    <Modal.Title>{'Add New Members to '}<span className='name'>{this.props.channel.display_nam}</span></Modal.Title>
+                    <Modal.Title>{'Add New Members to '}<span className='name'>{this.props.channel.display_name}</span></Modal.Title>
                 </Modal.Header>
                 <Modal.Body
                     ref='modalBody'
-                    style={{maxHeight}}
                 >
                     {inviteError}
                     {content}

web/react/components/channel_notifications_modal.jsx

@@ -335,7 +335,7 @@ export default class ChannelNotificationsModal extends React.Component {
                 onHide={this.props.onHide}
             >
                 <Modal.Header closeButton={true}>
-                    {'Notification Preferences for '}<span className='name'>{this.props.channel.display_name}</span>
+                    <Modal.Title>{'Notification Preferences for '}<span className='name'>{this.props.channel.display_name}</span></Modal.Title>
                 </Modal.Header>
                 <Modal.Body>
                     <div className='settings-table'>

web/react/components/delete_channel_modal.jsx

@@ -39,7 +39,9 @@ export default class DeleteChannelModal extends React.Component {
                 show={this.props.show}
                 onHide={this.props.onHide}
             >
-                <Modal.Header closeButton={true}>{'Confirm DELETE Channel'}</Modal.Header>
+                <Modal.Header closeButton={true}>
+                    <h4 className='modal-title'>{'Confirm DELETE Channel'}</h4>
+                </Modal.Header>
                 <Modal.Body>
                     {`Are you sure you wish to delete the ${this.props.channel.display_name} ${channelTerm}?`}
                 </Modal.Body>

web/react/components/delete_post_modal.jsx

@@ -131,7 +131,7 @@ export default class DeletePostModal extends React.Component {
                 onHide={this.handleHide}
             >
                 <Modal.Header closeButton={true}>
-                    {`Confirm ${postTerm} Delete`}
+                    <Modal.Title>{`Confirm ${postTerm} Delete`}</Modal.Title>
                 </Modal.Header>
                 <Modal.Body>
                     {`Are you sure you want to delete this ${postTerm.toLowerCase()}?`}

web/react/components/edit_channel_header_modal.jsx

@@ -84,7 +84,7 @@ export default class EditChannelHeaderModal extends React.Component {
                 onHide={this.onHide}
             >
                 <Modal.Header closeButton={true}>
-                    {'Edit Header for ' + this.props.channel.display_name}
+                    <Modal.Title>{'Edit Header for ' + this.props.channel.display_name}</Modal.Title>
                 </Modal.Header>
                 <Modal.Body>
                     <p>{'Edit the text appearing next to the channel name in the channel header.'}</p>

web/react/components/invite_member_modal.jsx

@@ -143,7 +143,7 @@ export default class InviteMemberModal extends React.Component {
 
     componentDidUpdate(prevProps, prevState) {
         if (!prevState.show && this.state.show) {
-            $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 50);
+            $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 200);
             if ($(window).width() > 768) {
                 $(ReactDOM.findDOMNode(this.refs.modalBody)).perfectScrollbar();
             }

web/react/components/post_info.jsx

@@ -196,7 +196,7 @@ export default class PostInfo extends React.Component {
                         type='text'
                         readOnly='true'
                         ref='permalinkbox'
-                        className='permalink-text form-control no-resize min-height input-large'
+                        className='permalink-text form-control no-resize'
                         rows='1'
                         value={permalink}
                     />

web/react/components/rhs_root_post.jsx

@@ -209,7 +209,7 @@ export default class RhsRootPost extends React.Component {
                                 </time>
                             </li>
                             <li className='col col__reply'>
-                                <div className='dropdown'>
+                                <div>
                                     {rootOptions}
                                 </div>
                             </li>

web/react/components/team_members_modal.jsx

@@ -26,9 +26,11 @@ export default class TeamMembersModal extends React.Component {
     }
 
     onShow() {
-        $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 50);
         if ($(window).width() > 768) {
             $(ReactDOM.findDOMNode(this.refs.modalBody)).perfectScrollbar();
+            $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 200);
+        } else {
+            $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 150);
         }
     }
 

web/react/components/user_settings/manage_outgoing_hooks.jsx

@@ -188,7 +188,7 @@ export default class ManageOutgoingHooks extends React.Component {
                     key={hook.id}
                     className='webhook__item'
                 >
-                    <div className='padding-top x2'>
+                    <div className='padding-top x2 webhook__url'>
                         <strong>{'URLs: '}</strong><span className='word-break--all'>{hook.callback_urls.join(', ')}</span>
                     </div>
                     {channelDiv}

web/react/components/user_settings/user_settings_modal.jsx

@@ -47,9 +47,11 @@ export default class UserSettingsModal extends React.Component {
     }
 
     handleShow() {
-        $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 50);
         if ($(window).width() > 768) {
             $(ReactDOM.findDOMNode(this.refs.modalBody)).perfectScrollbar();
+            $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 200);
+        } else {
+            $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 50);
         }
     }