PLT-4343 Fixes for mobile main menu (#4148)

* Fixed mobile app link in the main menu to be displayed on mobile browsers

* Fixed doubled up dividers in mobile menu

* Added scrolling to mobile main menu

10 files changed, 20 insertions, 12 deletions

diff --git a/webapp/actions/channel_actions.jsx b/webapp/actions/channel_actions.jsx
index c264fcb34..ed8e00db6 100644
--- a/webapp/actions/channel_actions.jsx
+++ b/webapp/actions/channel_actions.jsx
@@ -30,7 +30,7 @@ export function executeCommand(channelId, message, suggest, success, error) {
     msg = msg.substring(0, msg.indexOf(' ')).toLowerCase() + msg.substring(msg.indexOf(' '), msg.length);
 
     if (message.indexOf('/shortcuts') !== -1) {
-        if (UserAgent.isMobileApp()) {
+        if (UserAgent.isMobile()) {
             const err = {message: Utils.localizeMessage('create_post.shortcutsNotSupported', 'Keyboard shortcuts are not supported on your device')};
             error(err);
             return;
diff --git a/webapp/components/create_comment.jsx b/webapp/components/create_comment.jsx
index 133c2e6d2..1783f4d90 100644
--- a/webapp/components/create_comment.jsx
+++ b/webapp/components/create_comment.jsx
@@ -169,7 +169,7 @@ export default class CreateComment extends React.Component {
     }
 
     commentMsgKeyPress(e) {
-        if (!UserAgent.isMobileApp() && ((this.state.ctrlSend && e.ctrlKey) || !this.state.ctrlSend)) {
+        if (!UserAgent.isMobile() && ((this.state.ctrlSend && e.ctrlKey) || !this.state.ctrlSend)) {
             if (e.which === KeyCodes.ENTER && !e.shiftKey && !e.altKey) {
                 e.preventDefault();
                 ReactDOM.findDOMNode(this.refs.textbox).blur();
diff --git a/webapp/components/create_post.jsx b/webapp/components/create_post.jsx
index d3417e419..232edaa0c 100644
--- a/webapp/components/create_post.jsx
+++ b/webapp/components/create_post.jsx
@@ -199,7 +199,7 @@ export default class CreatePost extends React.Component {
     }
 
     postMsgKeyPress(e) {
-        if (!UserAgent.isMobileApp() && ((this.state.ctrlSend && e.ctrlKey) || !this.state.ctrlSend)) {
+        if (!UserAgent.isMobile() && ((this.state.ctrlSend && e.ctrlKey) || !this.state.ctrlSend)) {
             if (e.which === KeyCodes.ENTER && !e.shiftKey && !e.altKey) {
                 e.preventDefault();
                 ReactDOM.findDOMNode(this.refs.textbox).blur();
diff --git a/webapp/components/edit_post_modal.jsx b/webapp/components/edit_post_modal.jsx
index 24b1b5c3d..2ab4ec35f 100644
--- a/webapp/components/edit_post_modal.jsx
+++ b/webapp/components/edit_post_modal.jsx
@@ -95,7 +95,7 @@ export default class EditPostModal extends React.Component {
     }
 
     handleEditKeyPress(e) {
-        if (!UserAgent.isMobileApp() && !this.state.ctrlSend && e.which === KeyCodes.ENTER && !e.shiftKey && !e.altKey) {
+        if (!UserAgent.isMobile() && !this.state.ctrlSend && e.which === KeyCodes.ENTER && !e.shiftKey && !e.altKey) {
             e.preventDefault();
             ReactDOM.findDOMNode(this.refs.editbox).blur();
             this.handleEdit();
diff --git a/webapp/components/filtered_channel_list.jsx b/webapp/components/filtered_channel_list.jsx
index fd50704ff..64d033bc5 100644
--- a/webapp/components/filtered_channel_list.jsx
+++ b/webapp/components/filtered_channel_list.jsx
@@ -37,7 +37,7 @@ export default class FilteredChannelList extends React.Component {
 
     componentDidMount() {
         // only focus the search box on desktop so that we don't cause the keyboard to open on mobile
-        if (!UserAgent.isMobileApp()) {
+        if (!UserAgent.isMobile()) {
             ReactDOM.findDOMNode(this.refs.filter).focus();
         }
     }
diff --git a/webapp/components/filtered_user_list.jsx b/webapp/components/filtered_user_list.jsx
index 2f9a50d24..0e06d5943 100644
--- a/webapp/components/filtered_user_list.jsx
+++ b/webapp/components/filtered_user_list.jsx
@@ -62,7 +62,7 @@ class FilteredUserList extends React.Component {
 
     componentDidMount() {
         // only focus the search box on desktop so that we don't cause the keyboard to open on mobile
-        if (!UserAgent.isMobileApp()) {
+        if (!UserAgent.isMobile()) {
             ReactDOM.findDOMNode(this.refs.filter).focus();
         }
     }
diff --git a/webapp/sass/layout/_headers.scss b/webapp/sass/layout/_headers.scss
index 71dc98804..58ca512b6 100644
--- a/webapp/sass/layout/_headers.scss
+++ b/webapp/sass/layout/_headers.scss
@@ -221,6 +221,10 @@
     .divider {
         border-top: 1px solid transparent;
         margin: 0.5em 0;
+
+        & + .divider {
+            display: none;
+        }
     }
 
     .team__header {
@@ -302,10 +306,6 @@
             .admin-navbar-dropdown__icon {
                 fill: $white;
             }
-
-            .divider + .divider {
-                display: none;
-            }
         }
 
         .user__picture {
diff --git a/webapp/sass/layout/_sidebar-menu.scss b/webapp/sass/layout/_sidebar-menu.scss
index 97ab487c0..b01588ee0 100644
--- a/webapp/sass/layout/_sidebar-menu.scss
+++ b/webapp/sass/layout/_sidebar-menu.scss
@@ -5,6 +5,7 @@
     border-right: $border-gray;
     display: none;
     height: 100%;
+    overflow: auto;
     padding: 0 0 2em;
     position: absolute;
     right: 0;
diff --git a/webapp/utils/async_client.jsx b/webapp/utils/async_client.jsx
index 5441f260c..c5b0d015b 100644
--- a/webapp/utils/async_client.jsx
+++ b/webapp/utils/async_client.jsx
@@ -911,7 +911,7 @@ export function getSuggestedCommands(command, suggestionId, component) {
         (data) => {
             var matches = [];
             data.forEach((cmd) => {
-                if (cmd.trigger !== 'shortcuts' || !UserAgent.isMobileApp()) {
+                if (cmd.trigger !== 'shortcuts' || !UserAgent.isMobile()) {
                     if (('/' + cmd.trigger).indexOf(command) === 0) {
                         const s = '/' + cmd.trigger;
                         let hint = '';
diff --git a/webapp/utils/user_agent.jsx b/webapp/utils/user_agent.jsx
index dbabd594b..cece453ce 100644
--- a/webapp/utils/user_agent.jsx
+++ b/webapp/utils/user_agent.jsx
@@ -77,8 +77,15 @@ export function isAndroidWeb() {
     return isAndroidChrome();
 }
 
+// Returns true if and only if the user is using a Mattermost mobile app. This will return false if the user is using the
+// web browser on a mobile device.
 export function isMobileApp() {
-    return isAndroid() || isIos();
+    return userAgent.indexOf('iPhone') !== -1 && userAgent.indexOf('Safari') === -1 && userAgent.indexOf('CriOS') === -1;
+}
+
+// Returns true if and only if the user is using Mattermost from either the mobile app or the web browser on a mobile device.
+export function isMobile() {
+    return isIos() || isAndroid();
 }
 
 export function isFirefox() {