feat(chat): Improve responsiveness.

* Fix toolbox buttons not displaying properly when chat is open.
* Open chat in fullscreen dialog past custom thresholds when mobile/desktop toolbox would become unusable due to chat
* Remove mobile chat check when displaying toolbox

css/_base.scss

@@ -17,6 +17,7 @@ textarea {
 html {
     height: 100%;
     width: 100%;
+    overflow: hidden;
 }
 
 body {
@@ -201,74 +202,3 @@ form {
     background: rgba(0, 0, 0, .5);
     border-radius: 4px;
 }
-
-.desktop-browser {
-    @media only screen and (max-width: $smallScreen) {
-        .watermark {
-            width: 20%;
-            height: 20%;
-        }
-
-        .new-toolbox {
-            .toolbox-content {
-                .button-group-center, .button-group-left, .button-group-right {
-                    .toolbox-button {
-                        .toolbox-icon {
-                            width: 28px;
-                            height: 28px;
-                            svg {
-                                width: 18px;
-                                height: 18px;
-                            }
-                        }
-
-                        &:nth-child(2) {
-                            .toolbox-icon {
-                                width: 30px;
-                                height: 30px;
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-
-    @media only screen and (max-width: $verySmallScreen) {
-        #videoResolutionLabel {
-            display: none;
-        }
-        .vertical-filmstrip .filmstrip {
-            display: none;
-        }
-        .new-toolbox {
-            .toolbox-content {
-                .button-group-center, .button-group-left, .button-group-right {
-                    .settings-button-small-icon {
-                        display: none;
-                    }
-                    .toolbox-button {
-                        .toolbox-icon {
-                            width: 18px;
-                            height: 18px;
-                            svg {
-                                width: 12px;
-                                height: 12px;
-                            }
-                        }
-
-                        &:nth-child(2) {
-                            .toolbox-icon {
-                                width: 20px;
-                                height: 20px;
-                            }
-                        }
-                    }
-                }
-            }
-        }
-        .chrome-extension-banner {
-            display: none;
-        }
-    }
-}

css/_chat.scss

@@ -379,3 +379,31 @@
         }
     }
 }
+
+.chat-dialog {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    margin-top: -5px; // Margin set by atlaskit.
+
+    &-header {
+        display: flex;
+        justify-content: space-between;
+        margin: 16px 16px 24px;
+        width: calc(100% - 32px);
+        box-sizing: border-box;
+        color: #fff;
+        font-weight: 600;
+        font-size: 24px;
+        line-height: 32px;
+
+        .jitsi-icon > svg {
+            cursor: pointer;
+            fill: #A4B8D1;
+        }
+    }
+
+    #chatconversation {
+        width: 100%;
+    }
+}

css/_responsive.scss

@@ -1,3 +1,73 @@
+@mixin small-button-size() {
+    .new-toolbox {
+        .toolbox-content {
+            .button-group-center, .button-group-left, .button-group-right {
+                .toolbox-button {
+                    .toolbox-icon {
+                        width: 28px;
+                        height: 28px;
+                        svg {
+                            width: 18px;
+                            height: 18px;
+                        }
+                    }
+
+                    &:nth-child(2) {
+                        .toolbox-icon {
+                            width: 30px;
+                            height: 30px;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+@mixin very-small-button-size() {
+    .new-toolbox {
+        .toolbox-content {
+            .button-group-center, .button-group-left, .button-group-right {
+                .settings-button-small-icon {
+                    display: none;
+                }
+                .toolbox-button {
+                    .toolbox-icon {
+                        width: 18px;
+                        height: 18px;
+                        svg {
+                            width: 12px;
+                            height: 12px;
+                        }
+                    }
+
+                    &:nth-child(2) {
+                        .toolbox-icon {
+                            width: 20px;
+                            height: 20px;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+@mixin full-size-modal-positioner() {
+    height: 100%;
+    left: 0;
+    position: fixed;
+    top: 0;
+    max-width: 100%;
+    width: 100%;
+}
+
+@mixin full-size-modal-dialog() {
+    height: 100%;
+    max-height: 100%;
+    border-radius: 0;
+}
+
 @media only screen and (max-width: $verySmallScreen) {
     .welcome {
         display: block;
@@ -65,3 +135,65 @@
         }
     }
 }
+
+.desktop-browser {
+    @media only screen and (max-width: $smallScreen) {
+        @include small-button-size();
+    }
+
+    @media only screen and (max-width: $verySmallScreen) {
+        @include very-small-button-size();
+
+        #videoResolutionLabel {
+            display: none;
+        }
+        .vertical-filmstrip .filmstrip {
+            display: none;
+        }
+        .chrome-extension-banner {
+            display: none;
+        }
+    }
+
+    &.shift-right {
+        @media only screen and (max-width: $smallScreen + $sidebarWidth) {
+            @include small-button-size()
+        }
+
+        @media only screen and (max-width: $verySmallScreen + $sidebarWidth) {
+            @include very-small-button-size();
+
+            #videoResolutionLabel {
+                display: none;
+            }
+            .vertical-filmstrip .filmstrip {
+                display: none;
+            }
+            .chrome-extension-banner {
+                display: none;
+            }
+        }
+    }
+}
+
+@media (min-width: 480px) and (max-width: 580px) {
+    .shift-right [class^="Modal__PositionerAbsolute"] {
+        @include full-size-modal-positioner();
+    }
+
+    .shift-right [class^="Modal__Dialog-"] {
+        @include full-size-modal-dialog();
+    }
+}
+
+@media (min-width: 580px) and (max-width: 680px) {
+    .mobile-browser {
+        &.shift-right [class^="Modal__PositionerAbsolute"] {
+            @include full-size-modal-positioner();
+        }
+
+        &.shift-right [class^="Modal__Dialog-"] {
+            @include full-size-modal-dialog();
+        }
+    }
+}

react/features/chat/components/AbstractChat.js

@@ -3,14 +3,21 @@
 import { Component } from 'react';
 import type { Dispatch } from 'redux';
 
+import { isMobileBrowser } from '../../base/environment/utils';
 import { getLocalParticipant } from '../../base/participants';
 import { sendMessage, toggleChat } from '../actions';
+import { DESKTOP_SMALL_WIDTH_THRESHOLD, MOBILE_SMALL_WIDTH_THRESHOLD } from '../constants';
 
 /**
  * The type of the React {@code Component} props of {@code AbstractChat}.
  */
 export type Props = {
 
+    /**
+     * Whether the chat is opened in a modal or not (computed based on window width).
+     */
+    _isModal: boolean,
+
     /**
      * True if the chat window should be rendered.
      */
@@ -106,6 +113,9 @@ export function _mapStateToProps(state: Object) {
     const _localParticipant = getLocalParticipant(state);
 
     return {
+        _isModal: isMobileBrowser()
+            ? window.innerWidth <= MOBILE_SMALL_WIDTH_THRESHOLD
+            : window.innerWidth <= DESKTOP_SMALL_WIDTH_THRESHOLD,
         _isOpen: isOpen,
         _messages: messages,
         _showNamePrompt: !_localParticipant.name

react/features/chat/components/web/Chat.js

@@ -11,6 +11,7 @@ import AbstractChat, {
     type Props
 } from '../AbstractChat';
 
+import ChatDialog from './ChatDialog';
 import ChatInput from './ChatInput';
 import DisplayNameForm from './DisplayNameForm';
 import MessageContainer from './MessageContainer';
@@ -151,16 +152,25 @@ class Chat extends AbstractChat<Props> {
      * @returns {ReactElement | null}
      */
     _renderPanelContent() {
-        const { _isOpen, _showNamePrompt } = this.props;
+        const { _isModal, _isOpen, _showNamePrompt } = this.props;
-        const ComponentToRender = _isOpen
+        let ComponentToRender = null;
-            ? (
+
-                <>
+        if (_isOpen) {
-                    { this._renderChatHeader() }
+            if (_isModal) {
-                    { _showNamePrompt
+                ComponentToRender = (
-                        ? <DisplayNameForm /> : this._renderChat() }
+                    <ChatDialog>
-                </>
+                        { _showNamePrompt ? <DisplayNameForm /> : this._renderChat() }
-            )
+                    </ChatDialog>
-            : null;
+                );
+            } else {
+                ComponentToRender = (
+                    <>
+                        { this._renderChatHeader() }
+                        { _showNamePrompt ? <DisplayNameForm /> : this._renderChat() }
+                    </>
+                );
+            }
+        }
         let className = '';
 
         if (_isOpen) {

react/features/chat/components/web/ChatDialog.js

@@ -0,0 +1,37 @@
+// @flow
+
+import React from 'react';
+
+import { Dialog } from '../../../base/dialog';
+
+import Header from './ChatDialogHeader';
+
+type Props = {
+
+    /**
+     * Children of the component.
+     */
+    children: React$Node
+}
+
+/**
+ * Component that renders the content of the chat in a modal.
+ *
+ * @returns {React$Element<any>}
+ */
+function ChatDialog({ children }: Props) {
+    return (
+        <Dialog
+            customHeader = { Header }
+            disableEnter = { true }
+            hideCancelButton = { true }
+            submitDisabled = { true }
+            titleKey = 'chat.title'>
+            <div className = 'chat-dialog'>
+                {children}
+            </div>
+        </Dialog>
+    );
+}
+
+export default ChatDialog;

react/features/chat/components/web/ChatDialogHeader.js

@@ -0,0 +1,42 @@
+// @flow
+
+import React from 'react';
+
+import { translate } from '../../../base/i18n';
+import { Icon, IconClose } from '../../../base/icons';
+import { connect } from '../../../base/redux';
+import { toggleChat } from '../../../chat';
+
+type Props = {
+
+    /**
+     * Function to be called when pressing the close button.
+     */
+    onCancel: Function,
+
+    /**
+     * Invoked to obtain translated strings.
+     */
+    t: Function
+};
+
+/**
+ * Custom header of the {@code ChatDialog}.
+ *
+ * @returns {React$Element<any>}
+ */
+function Header({ onCancel, t }: Props) {
+    return (
+        <div
+            className = 'chat-dialog-header'>
+            { t('chat.title') }
+            <Icon
+                onClick = { onCancel }
+                src = { IconClose } />
+        </div>
+    );
+}
+
+const mapDispatchToProps = { onCancel: toggleChat };
+
+export default translate(connect(null, mapDispatchToProps)(Header));

react/features/chat/constants.js

@@ -29,3 +29,7 @@ export const MESSAGE_TYPE_LOCAL = 'local';
  * The {@code messageType} of remote messages.
  */
 export const MESSAGE_TYPE_REMOTE = 'remote';
+
+export const DESKTOP_SMALL_WIDTH_THRESHOLD = 580;
+
+export const MOBILE_SMALL_WIDTH_THRESHOLD = 680;

react/features/toolbox/functions.web.js

@@ -1,7 +1,6 @@
 // @flow
 
 import { hasAvailableDevices } from '../base/devices';
-import { isMobileBrowser } from '../base/environment/utils';
 
 declare var interfaceConfig: Object;
 
@@ -49,10 +48,8 @@ export function isToolboxVisible(state: Object) {
         visible
     } = state['features/toolbox'];
     const { audioSettingsVisible, videoSettingsVisible } = state['features/settings'];
-    const { isOpen } = state['features/chat'];
-    const isMobileChatOpen = isMobileBrowser() && isOpen;
 
-    return Boolean(!isMobileChatOpen && !iAmSipGateway && (timeoutID || visible || alwaysVisible
+    return Boolean(!iAmSipGateway && (timeoutID || visible || alwaysVisible
                                       || audioSettingsVisible || videoSettingsVisible));
 }