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

2 files changed, 9 insertions, 2 deletions

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() {