diff --git a/react/features/chat/actions.web.js b/react/features/chat/actions.web.js
index f9e73bd98..717777344 100644
--- a/react/features/chat/actions.web.js
+++ b/react/features/chat/actions.web.js
@@ -20,9 +20,10 @@ export * from './actions.any';
  */
 export function openChat(participant: Object) {
     return function(dispatch: (Object) => Object) {
-        dispatch({ participant,
-            type: OPEN_CHAT });
-        VideoLayout.onResize();
+        dispatch({
+            participant,
+            type: OPEN_CHAT
+        });
     };
 }
 
@@ -40,5 +41,8 @@ export function toggleChat() {
         } else {
             dispatch(openChat());
         }
+
+        // Recompute the large video size whenever we toggle the chat, as it takes chat state into account.
+        VideoLayout.onResize();
     };
 }
diff --git a/react/features/chat/components/web/Chat.js b/react/features/chat/components/web/Chat.js
index 6507703e7..1d2fd8d15 100644
--- a/react/features/chat/components/web/Chat.js
+++ b/react/features/chat/components/web/Chat.js
@@ -4,7 +4,6 @@ import React from 'react';
 
 import { translate } from '../../../base/i18n';
 import { connect } from '../../../base/redux';
-import { toggleChat } from '../../actions.web';
 import AbstractChat, {
     _mapStateToProps,
     type Props
@@ -52,7 +51,6 @@ class Chat extends AbstractChat<Props> {
         // Bind event handlers so they are only bound once for every instance.
         this._renderPanelContent = this._renderPanelContent.bind(this);
         this._onChatInputResize = this._onChatInputResize.bind(this);
-        this._onToggleChat = this._onToggleChat.bind(this);
     }
 
     /**
@@ -137,9 +135,7 @@ class Chat extends AbstractChat<Props> {
      */
     _renderChatHeader() {
         return (
-            <Header
-                className = 'chat-header'
-                onCancel = { this._onToggleChat } />
+            <Header className = 'chat-header' />
         );
     }
 
@@ -203,18 +199,6 @@ class Chat extends AbstractChat<Props> {
     }
 
     _onSendMessage: (string) => void;
-
-    _onToggleChat: () => void;
-
-    /**
-    * Toggles the chat window.
-    *
-    * @returns {Function}
-    */
-    _onToggleChat() {
-        this.props.dispatch(toggleChat());
-    }
-
 }
 
 export default translate(connect(_mapStateToProps)(Chat));
diff --git a/react/features/chat/components/web/ChatDialogHeader.js b/react/features/chat/components/web/ChatDialogHeader.js
index 4e09ac94f..10c935b7f 100644
--- a/react/features/chat/components/web/ChatDialogHeader.js
+++ b/react/features/chat/components/web/ChatDialogHeader.js
@@ -5,7 +5,7 @@ import React from 'react';
 import { translate } from '../../../base/i18n';
 import { Icon, IconClose } from '../../../base/icons';
 import { connect } from '../../../base/redux';
-import { closeChat } from '../../actions.any';
+import { toggleChat } from '../../actions.web';
 
 type Props = {
 
@@ -42,6 +42,6 @@ function Header({ onCancel, className, t }: Props) {
     );
 }
 
-const mapDispatchToProps = { onCancel: closeChat };
+const mapDispatchToProps = { onCancel: toggleChat };
 
 export default translate(connect(null, mapDispatchToProps)(Header));