From 6350b3e268c009c3e318196c93ad4fb189c1e51d Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <asaad@spinpunch.com>
Date: Thu, 10 Dec 2015 10:38:57 +0500
Subject: [PATCH 1/4] FIxing scroll for more direct channels

---
 web/react/components/more_direct_channels.jsx | 28 +++++++++++--------
 web/sass-files/sass/partials/_modal.scss      |  5 ++--
 2 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/web/react/components/more_direct_channels.jsx b/web/react/components/more_direct_channels.jsx
index cf40af6aea..a65ce21d13 100644
--- a/web/react/components/more_direct_channels.jsx
+++ b/web/react/components/more_direct_channels.jsx
@@ -47,6 +47,21 @@ export default class MoreDirectChannels extends React.Component {
         UserStore.addChangeListener(this.handleUserChange);
     }
 
+    componentDidUpdate(prevProps) {
+        if (!prevProps.show && this.props.show) {
+            this.onShow();
+        }
+    }
+
+    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);
+        }
+    }
+
     handleFilterChange() {
         const filter = ReactDOM.findDOMNode(this.refs.filter).value;
 
@@ -164,15 +179,6 @@ 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() - 50);
-            if ($(window).width() > 768) {
-                $(ReactDOM.findDOMNode(this.refs.userList)).perfectScrollbar();
-            }
-        }
-    }
-
     render() {
         if (!this.props.show) {
             return null;
@@ -217,8 +223,8 @@ export default class MoreDirectChannels extends React.Component {
                 <Modal.Header closeButton={true}>
                     <Modal.Title>{'Direct Messages'}</Modal.Title>
                 </Modal.Header>
-                <Modal.Body>
-                    <div className='row filter-row'>
+                <Modal.Body ref='modalBody'>
+                    <div className='filter-row'>
                         <div className='col-sm-6'>
                             <input
                                 ref='filter'
diff --git a/web/sass-files/sass/partials/_modal.scss b/web/sass-files/sass/partials/_modal.scss
index a082ffb220..d533b4e9eb 100644
--- a/web/sass-files/sass/partials/_modal.scss
+++ b/web/sass-files/sass/partials/_modal.scss
@@ -382,8 +382,6 @@
 
 	.user-list {
 		margin-top: 10px;
-		overflow: auto;
-		-webkit-overflow-scrolling: touch;
 		max-height: 500px;
 		position: relative;
 	}
@@ -394,11 +392,12 @@
 
 	.modal-body {
 		padding: 10px 0 20px;
+		overflow-x: hidden;
 	}
 
 	.filter-row {
 		margin-top: 10px;
-		padding: 0 15px;
+		@include clearfix;
 	}
 
 	.member-count {

From 2e19d529aa1f7c0eac7b26596e657b7820944c17 Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <asaad@spinpunch.com>
Date: Thu, 10 Dec 2015 21:00:08 +0500
Subject: [PATCH 2/4] Updating code for direct messages

---
 web/react/components/more_direct_channels.jsx | 6 +++---
 web/sass-files/sass/partials/_modal.scss      | 2 ++
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/web/react/components/more_direct_channels.jsx b/web/react/components/more_direct_channels.jsx
index a65ce21d13..c14bec52b6 100644
--- a/web/react/components/more_direct_channels.jsx
+++ b/web/react/components/more_direct_channels.jsx
@@ -55,10 +55,10 @@ export default class MoreDirectChannels 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);
+            $(ReactDOM.findDOMNode(this.refs.userList)).perfectScrollbar();
+            $(ReactDOM.findDOMNode(this.refs.userList)).css('max-height', $(window).height() - 300);
         } else {
-            $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 150);
+            $(ReactDOM.findDOMNode(this.refs.userList)).css('max-height', $(window).height() - 250);
         }
     }
 
diff --git a/web/sass-files/sass/partials/_modal.scss b/web/sass-files/sass/partials/_modal.scss
index d533b4e9eb..6f70e502f6 100644
--- a/web/sass-files/sass/partials/_modal.scss
+++ b/web/sass-files/sass/partials/_modal.scss
@@ -381,6 +381,8 @@
 .more-modal {
 
 	.user-list {
+		overflow-y: auto;
+		overflow-x: hidden;
 		margin-top: 10px;
 		max-height: 500px;
 		position: relative;

From 8236bde848a1e38d3cbfc5a2d5c2f191e03dba0e Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <asaad@spinpunch.com>
Date: Fri, 11 Dec 2015 20:10:52 +0500
Subject: [PATCH 3/4] Updating direct messages code

---
 web/react/components/more_direct_channels.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/react/components/more_direct_channels.jsx b/web/react/components/more_direct_channels.jsx
index c14bec52b6..f66eb7c267 100644
--- a/web/react/components/more_direct_channels.jsx
+++ b/web/react/components/more_direct_channels.jsx
@@ -54,7 +54,7 @@ export default class MoreDirectChannels extends React.Component {
     }
 
     onShow() {
-        if ($(window).width() > 768) {
+        if (!Utils.isMobile()) {
             $(ReactDOM.findDOMNode(this.refs.userList)).perfectScrollbar();
             $(ReactDOM.findDOMNode(this.refs.userList)).css('max-height', $(window).height() - 300);
         } else {

From b0f841462924279320d50a9e73af5ce6878ea402 Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <asaad@spinpunch.com>
Date: Fri, 11 Dec 2015 23:55:48 +0500
Subject: [PATCH 4/4] ADding utilis mobile instead of width

---
 web/react/components/more_direct_channels.jsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/web/react/components/more_direct_channels.jsx b/web/react/components/more_direct_channels.jsx
index f66eb7c267..3661b19e6f 100644
--- a/web/react/components/more_direct_channels.jsx
+++ b/web/react/components/more_direct_channels.jsx
@@ -54,11 +54,11 @@ export default class MoreDirectChannels extends React.Component {
     }
 
     onShow() {
-        if (!Utils.isMobile()) {
+        if (Utils.isMobile()) {
+            $(ReactDOM.findDOMNode(this.refs.userList)).css('max-height', $(window).height() - 250);
+        } else {
             $(ReactDOM.findDOMNode(this.refs.userList)).perfectScrollbar();
             $(ReactDOM.findDOMNode(this.refs.userList)).css('max-height', $(window).height() - 300);
-        } else {
-            $(ReactDOM.findDOMNode(this.refs.userList)).css('max-height', $(window).height() - 250);
         }
     }