fix(Chat): Fix modals displaying improperly due to chat.

* Adjust chat font size.
* Adjust invite more button and text size.
* Remove useless constant.

css/_atlaskit_overrides.scss

@@ -113,27 +113,17 @@
     }
 }
 
-@media (min-width: 580px) and (max-width: 680px) {
+@media (max-width: 580px) {
-    .mobile-browser {
+    // Override Atlaskit inline style for the modal background.
-        &.shift-right .focus-lock > div > div {
+    // Important is unfortunately needed for that.
-            @include full-size-modal-positioner();
+    .shift-right .focus-lock [role="dialog"][style] {
-        }
+        background-color: $chatBackgroundColor !important;
-
-        &.shift-right .focus-lock [role="dialog"] {
-            @include full-size-modal-dialog();
-        }
     }
-}
-
-// Override Atlaskit inline style for the modal background.
-// Important is unfortunately needed for that.
-.shift-right .focus-lock [role="dialog"][style] {
-    background-color: $chatBackgroundColor !important;
-}
 
-// Remove Atlaskit padding from the chat dialog.
+    // Remove Atlaskit padding from the chat dialog.
-.shift-right .focus-lock [role="dialog"] > div:first-child > div:nth-child(2) {
+    .shift-right .focus-lock [role="dialog"] > div:first-child > div:nth-child(2) {
-    padding: 0;
+        padding: 0;
+    }
 }
 
 div.Tooltip {

css/_chat.scss

@@ -129,10 +129,6 @@
 
     &.populated {
         #chat-input {
-            &:focus-within {
-                border: 1px solid #619CF4;
-            }
-
             .send-button {
                 background: #1B67EC;
                 cursor: pointer;
@@ -161,6 +157,10 @@
     padding: 4px;
     border-radius: 3px;
 
+    &:focus-within {
+        border: 1px solid #619CF4;
+    }
+
     * {
         background-color: transparent;
     }
@@ -214,7 +214,7 @@
     border-radius:0;
     box-shadow: none;
     color: white;
-    font-size: 15px;
+    font-size: 14px;
     padding: 10px;
     overflow-y: auto;
     resize: none;
@@ -271,6 +271,14 @@
             height: 48px;
         }
     }
+
+    #usermsg {
+        font-size: 16px;
+    }
+
+    .chatmessage .usermessage {
+        font-size: 16px;
+    }
 }
 
 .sideToolbarContainer {
@@ -309,6 +317,7 @@
 
     .usermessage {
         white-space: pre-wrap;
+        font-size: 14px;
     }
 
     &.error {

css/modals/invite/_invite_more.scss

@@ -16,7 +16,7 @@
         background: rgba(0, 0, 0, 0.7);
         border-radius: 8px;
         color: #fff;
-        font-size: 16px;
+        font-size: 14px;
         line-height: 24px;
         font-weight: 600;
     }
@@ -32,9 +32,9 @@
     &-button {
         display: flex;
         max-width: 100%;
-        height: 48px;
+        height: 40px;
         box-sizing: border-box;
-        padding: 12px 16px;
+        padding: 8px 16px;
         background: #0376DA;
         border-radius: 3px;
         cursor: pointer;
@@ -207,3 +207,14 @@
         }
     }
 }
+
+.mobile-browser {
+    .invite-more-content {
+        font-size: 16px;
+    }
+
+    .invite-more-button {
+        height: 48px;
+        padding: 12px 16px;
+    }
+}

react/features/chat/components/AbstractChat.js

@@ -3,10 +3,9 @@
 import { Component } from 'react';
 import type { Dispatch } from 'redux';
 
-import { isMobileBrowser } from '../../base/environment/utils';
 import { getLocalParticipant } from '../../base/participants';
 import { sendMessage } from '../actions';
-import { DESKTOP_SMALL_WIDTH_THRESHOLD, MOBILE_SMALL_WIDTH_THRESHOLD } from '../constants';
+import { SMALL_WIDTH_THRESHOLD } from '../constants';
 
 /**
  * The type of the React {@code Component} props of {@code AbstractChat}.
@@ -106,9 +105,7 @@ export function _mapStateToProps(state: Object) {
     const _localParticipant = getLocalParticipant(state);
 
     return {
-        _isModal: isMobileBrowser()
+        _isModal: window.innerWidth <= SMALL_WIDTH_THRESHOLD,
-            ? window.innerWidth <= MOBILE_SMALL_WIDTH_THRESHOLD
-            : window.innerWidth <= DESKTOP_SMALL_WIDTH_THRESHOLD,
         _isOpen: isOpen,
         _messages: messages,
         _showNamePrompt: !_localParticipant.name

react/features/chat/constants.js

@@ -30,6 +30,4 @@ export const MESSAGE_TYPE_LOCAL = 'local';
  */
 export const MESSAGE_TYPE_REMOTE = 'remote';
 
-export const DESKTOP_SMALL_WIDTH_THRESHOLD = 580;
+export const SMALL_WIDTH_THRESHOLD = 580;
-
-export const MOBILE_SMALL_WIDTH_THRESHOLD = 680;