diff --git a/bigbluebutton-html5/imports/ui/components/chat/message-list/component.jsx b/bigbluebutton-html5/imports/ui/components/chat/message-list/component.jsx
index 9ea5eab539d232d3ef1c5192db91415f72d82d65..fc92caaa82e71df4f853e321a5b240a4f8d909ad 100644
--- a/bigbluebutton-html5/imports/ui/components/chat/message-list/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/chat/message-list/component.jsx
@@ -147,7 +147,7 @@ class MessageList extends Component {
       handleScrollUpdate,
     } = this.props;
 
-    if (position !== null && position + target.offsetHeight === target.scrollHeight) {
+    if (position !== null && position + target?.offsetHeight === target?.scrollHeight) {
       // I used one because the null value is used to notify that
       // the user has sent a message and the message list should scroll to bottom
       handleScrollUpdate(1);
@@ -159,10 +159,10 @@ class MessageList extends Component {
 
   handleScrollChange(e) {
     const { scrollArea } = this.state;
-    const scrollCursorPosition = e.scrollTop + scrollArea.offsetHeight;
+    const scrollCursorPosition = e.scrollTop + scrollArea?.offsetHeight;
     const shouldScrollBottom = e.scrollTop === null
-      || scrollCursorPosition === scrollArea.scrollHeight
-      || (scrollArea.scrollHeight - scrollCursorPosition < 1);
+      || scrollCursorPosition === scrollArea?.scrollHeight
+      || (scrollArea?.scrollHeight - scrollCursorPosition < 1);
 
     if ((e.scrollTop < this.lastKnowScrollPosition) && !shouldScrollBottom) {
       this.setState({ shouldScrollToBottom: false });
diff --git a/bigbluebutton-html5/imports/ui/components/external-video-player/component.jsx b/bigbluebutton-html5/imports/ui/components/external-video-player/component.jsx
index a5a4dd78979f3590a2ddf5aee9c8834cc6a80de4..ed6cd1829e8170acf5dfa046c5265d5b7020e861 100644
--- a/bigbluebutton-html5/imports/ui/components/external-video-player/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/external-video-player/component.jsx
@@ -104,6 +104,7 @@ class VideoPlayer extends Component {
 
   componentDidMount() {
     window.addEventListener('resize', this.resizeListener);
+    window.addEventListener('layoutSizesSets', this.resizeListener);
     window.addEventListener('beforeunload', this.onBeforeUnload);
 
     clearInterval(this.syncInterval);
diff --git a/bigbluebutton-html5/imports/ui/components/layout/layout-manager.jsx b/bigbluebutton-html5/imports/ui/components/layout/layout-manager.jsx
index 5a27d6fe807e793b63b75851d021e3f325c78b20..1d97e9dd59ae8c9e242d19b78e14f0e46f67eef5 100644
--- a/bigbluebutton-html5/imports/ui/components/layout/layout-manager.jsx
+++ b/bigbluebutton-html5/imports/ui/components/layout/layout-manager.jsx
@@ -312,25 +312,43 @@ class LayoutManager extends Component {
       };
     }
 
-    if (openPanel === 'userlist') {
-      newChatSize = {
-        width: 0,
-      };
-      newBreakoutRoomSize = {
-        width: 0,
-      };
-    }
-
-    if (openPanel === '') {
-      newUserListSize = {
-        width: 0,
-      };
-      newChatSize = {
-        width: 0,
-      };
-      newBreakoutRoomSize = {
-        width: 0,
-      };
+    switch (openPanel) {
+      case 'userlist': {
+        newChatSize = {
+          width: 0,
+        };
+        newBreakoutRoomSize = {
+          width: 0,
+        };
+        break;
+      }
+      case 'chat': {
+        newBreakoutRoomSize = {
+          width: 0,
+        };
+        break;
+      }
+      case 'breakoutroom': {
+        newChatSize = {
+          width: 0,
+        };
+        break;
+      }
+      case '': {
+        newUserListSize = {
+          width: 0,
+        };
+        newChatSize = {
+          width: 0,
+        };
+        newBreakoutRoomSize = {
+          width: 0,
+        };
+        break;
+      }
+      default: {
+        throw new Error('Unexpected openPanel value');
+      }
     }
 
     return {
diff --git a/bigbluebutton-html5/imports/ui/components/panel-manager/component.jsx b/bigbluebutton-html5/imports/ui/components/panel-manager/component.jsx
index a77d4b43ed0fa48fc4307f2966bd0f085390aad3..6fee72c51deabdf83e61bf747ff71f0980e1aa4f 100755
--- a/bigbluebutton-html5/imports/ui/components/panel-manager/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/panel-manager/component.jsx
@@ -98,27 +98,6 @@ class PanelManager extends Component {
     this.setUserListWidth = this.setUserListWidth.bind(this);
   }
 
-  shouldComponentUpdate(prevProps) {
-    const { layoutContextState } = this.props;
-    const { layoutContextState: prevLayoutContextState } = prevProps;
-    const {
-      userListSize,
-      chatSize,
-      breakoutRoomSize,
-    } = layoutContextState;
-    const {
-      userListSize: prevUserListSize,
-      chatSize: prevChatSize,
-      breakoutRoomSize: prevBreakoutRoomSize,
-    } = prevLayoutContextState;
-
-    if ((layoutContextState !== prevLayoutContextState)
-      && (userListSize.width === prevUserListSize.width
-        && chatSize.width === prevChatSize.width
-        && breakoutRoomSize.width === prevBreakoutRoomSize.width)) return false;
-    return true;
-  }
-
   componentDidUpdate(prevProps) {
     const {
       userlistWidth,