fix(welcome-page): modify styling for narrow screens (#2724)

* fix(welcome-page): modify styling for narrow screens

* squash: fix autoscrolling on mobile safari

css/_welcome_page.scss

@@ -1,7 +1,11 @@
+body.welcome-page {
+    background: inherit;
+    overflow: auto;
+}
+
 .welcome {
     font-family: $welcomePageFontFamily;
     height: 100%;
-    overflow: auto;
     position: relative;
 
     .header {
@@ -19,6 +23,7 @@
             justify-content: space-around;
             margin-top: 120px;
             margin-bottom: 20px;
+            max-width: calc(100% - 40px);
             min-height: 286px;
             width: 645px;
         }
@@ -50,6 +55,7 @@
             align-items: center;
             display: flex;
             margin-bottom: 20px;
+            max-width: calc(100% - 40px);
             position: relative;
             z-index: 2;
 

react/features/app/functions.web.js

@@ -31,9 +31,9 @@ const _INTERCEPT_COMPONENT_RULES = [
 
     /**
      * This rule describes case when user opens application using mobile
-     * browser. In order to promote the app, we choose to suggest the mobile
-     * app even if the browser supports the app (e.g. Google Chrome with
-     * WebRTC support on Android).
+     * browser and is attempting to join a conference. In order to promote the
+     * app, we choose to suggest the mobile app even if the browser supports the
+     * app (e.g. Google Chrome with WebRTC support on Android).
      *
      * @param {Object} state - The redux state of the app.
      * @returns {UnsupportedMobileBrowser|void} If the rule is satisfied then
@@ -42,8 +42,15 @@ const _INTERCEPT_COMPONENT_RULES = [
     // eslint-disable-next-line no-unused-vars
     state => {
         const OS = Platform.OS;
-
-        if (OS === 'android' || OS === 'ios') {
+        const { room } = state['features/base/conference'];
+        const isUsingMobileBrowser = OS === 'android' || OS === 'ios';
+
+        /**
+         * Checking for presence of a room is done so that interception only
+         * occurs when trying to enter a meeting but pages outside of meeting,
+         * like WelcomePage, can still display.
+         */
+        if (room && isUsingMobileBrowser) {
             const mobileAppPromo
                 = typeof interfaceConfig === 'object'
                     && interfaceConfig.MOBILE_APP_PROMO;

react/features/welcome/components/WelcomePage.web.js

@@ -10,6 +10,7 @@ import { initAnalytics } from '../../analytics';
 import { translate } from '../../base/i18n';
 import { isAnalyticsEnabled } from '../../base/lib-jitsi-meet';
 import { Watermarks } from '../../base/react';
+import { HideNotificationBarStyle } from '../../unsupported-browser';
 
 import { AbstractWelcomePage, _mapStateToProps } from './AbstractWelcomePage';
 
@@ -69,6 +70,8 @@ class WelcomePage extends AbstractWelcomePage {
      * @returns {void}
      */
     componentDidMount() {
+        document.body.classList.add('welcome-page');
+
         // FIXME: This is not the best place for this logic. Ideally we should
         // use features/base/lib-jitsi-meet#initLib() action for this use case.
         // But currently lib-jitsi-meet#initLib()'s logic works for mobile only
@@ -90,6 +93,16 @@ class WelcomePage extends AbstractWelcomePage {
         }
     }
 
+    /**
+     * Removes the classname used for custom styling of the welcome page.
+     *
+     * @inheritdoc
+     * @returns {void}
+     */
+    componentWillUnmount() {
+        document.body.classList.remove('welcome-page');
+    }
+
     /**
      * Implements React's {@link Component#render()}.
      *
@@ -150,6 +163,7 @@ class WelcomePage extends AbstractWelcomePage {
                             ref = { this._setAdditionalContentRef } />
                         : null }
                 </div>
+                <HideNotificationBarStyle />
             </AtlasKitThemeProvider>
         );
     }