Fixing more direct channel modal scrolling

web/react/components/more_direct_channels.jsx

@@ -193,6 +193,15 @@ export default class MoreDirectChannels extends React.Component {
         );
     }
 
+    componentDidUpdate(prevProps) {
+        if (!prevProps.show && this.props.show) {
+            $(ReactDOM.findDOMNode(this.refs.userList)).css('max-height', $(window).height() - 300);
+            if ($(window).width() > 768) {
+                $(ReactDOM.findDOMNode(this.refs.userList)).perfectScrollbar();
+            }
+        }
+    }
+
     render() {
         if (!this.props.show) {
             return null;
@@ -249,7 +258,10 @@ export default class MoreDirectChannels extends React.Component {
                             <span className='member-count'>{count}</span>
                         </div>
                     </div>
-                    <div className='user-list'>
+                    <div
+                        ref='userList'
+                        className='user-list'
+                    >
                         <table className='more-table table'>
                             <tbody>
                                 {userEntries}

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

@@ -153,6 +153,8 @@
 		.more-name {
 			font-weight: 600;
 			font-size: 0.95em;
+			overflow: hidden;
+			text-overflow: ellipsis;
 		}
 		tbody {
 			> tr {
@@ -340,6 +342,7 @@
 		overflow: auto;
 		-webkit-overflow-scrolling: touch;
 		max-height: 500px;
+		position: relative;
 	}
 
 	.table {

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

@@ -270,6 +270,13 @@
             height: auto;
         }
     }
+    .modal-direct-channels {
+        .member-count {
+            float: none;
+            margin-top: 10px;
+            display: block;
+        }
+    }
     .center-file-overlay {
         font-size: 1.3em;
     }