From 9e55f2409214f97014143549997e5d445d9787ed Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Thu, 20 May 2021 16:11:33 +0100
Subject: [PATCH] Remove extraenous DOM nodes

---
 src/components/structures/ContextMenu.tsx     |  2 +-
 src/components/structures/ToastContainer.tsx  | 22 ++++++++++---------
 src/components/views/rooms/RoomHeader.js      | 18 +++++++--------
 .../views/rooms/SimpleRoomHeader.js           | 12 +++++-----
 src/components/views/rooms/WhoIsTypingTile.js |  2 +-
 5 files changed, 27 insertions(+), 29 deletions(-)

diff --git a/src/components/structures/ContextMenu.tsx b/src/components/structures/ContextMenu.tsx
index ad0f75e162..f9de113d07 100644
--- a/src/components/structures/ContextMenu.tsx
+++ b/src/components/structures/ContextMenu.tsx
@@ -389,7 +389,7 @@ export class ContextMenu extends React.PureComponent<IProps, IState> {
     }
 
     render(): React.ReactChild {
-        return ReactDOM.createPortal(this.renderMenu(), getOrCreateContainer());
+        return ReactDOM.createPortal(this.renderMenu(), document.body);
     }
 }
 
diff --git a/src/components/structures/ToastContainer.tsx b/src/components/structures/ToastContainer.tsx
index 1fd3e3419f..273c8a079f 100644
--- a/src/components/structures/ToastContainer.tsx
+++ b/src/components/structures/ToastContainer.tsx
@@ -55,6 +55,7 @@ export default class ToastContainer extends React.Component<{}, IState> {
         const totalCount = this.state.toasts.length;
         const isStacked = totalCount > 1;
         let toast;
+        let containerClasses;
         if (totalCount !== 0) {
             const topToast = this.state.toasts[0];
             const {title, icon, key, component, className, props} = topToast;
@@ -79,16 +80,17 @@ export default class ToastContainer extends React.Component<{}, IState> {
                 </div>
                 <div className="mx_Toast_body">{React.createElement(component, toastProps)}</div>
             </div>);
+
+            containerClasses = classNames("mx_ToastContainer", {
+                "mx_ToastContainer_stacked": isStacked,
+            });
         }
-
-        const containerClasses = classNames("mx_ToastContainer", {
-            "mx_ToastContainer_stacked": isStacked,
-        });
-
-        return (
-            <div className={containerClasses} role="alert">
-                {toast}
-            </div>
-        );
+        return toast
+            ? (
+                <div className={containerClasses} role="alert">
+                    {toast}
+                </div>
+            )
+            : null;
     }
 }
diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js
index 6d3b50c10d..a527d7625c 100644
--- a/src/components/views/rooms/RoomHeader.js
+++ b/src/components/views/rooms/RoomHeader.js
@@ -257,16 +257,14 @@ export default class RoomHeader extends React.Component {
         const e2eIcon = this.props.e2eStatus ? <E2EIcon status={this.props.e2eStatus} /> : undefined;
 
         return (
-            <div className="mx_RoomHeader light-panel">
-                <div className="mx_RoomHeader_wrapper" aria-owns="mx_RightPanel">
-                    <div className="mx_RoomHeader_avatar">{ roomAvatar }</div>
-                    <div className="mx_RoomHeader_e2eIcon">{ e2eIcon }</div>
-                    { name }
-                    { topicElement }
-                    { cancelButton }
-                    { rightRow }
-                    <RoomHeaderButtons />
-                </div>
+            <div className="mx_RoomHeader mx_RoomHeader_wrapper light-panel" aria-owns="mx_RightPanel">
+                <div className="mx_RoomHeader_avatar">{ roomAvatar }</div>
+                <div className="mx_RoomHeader_e2eIcon">{ e2eIcon }</div>
+                { name }
+                { topicElement }
+                { cancelButton }
+                { rightRow }
+                <RoomHeaderButtons />
             </div>
         );
     }
diff --git a/src/components/views/rooms/SimpleRoomHeader.js b/src/components/views/rooms/SimpleRoomHeader.js
index b2a66f6670..9aedb38654 100644
--- a/src/components/views/rooms/SimpleRoomHeader.js
+++ b/src/components/views/rooms/SimpleRoomHeader.js
@@ -62,13 +62,11 @@ export default class SimpleRoomHeader extends React.Component {
         }
 
         return (
-            <div className="mx_RoomHeader" >
-                <div className="mx_RoomHeader_wrapper">
-                    <div className="mx_RoomHeader_simpleHeader">
-                        { icon }
-                        { this.props.title }
-                        { cancelButton }
-                    </div>
+            <div className="mx_RoomHeader mx_RoomHeader_wrapper" >
+                <div className="mx_RoomHeader_simpleHeader">
+                    { icon }
+                    { this.props.title }
+                    { cancelButton }
                 </div>
             </div>
         );
diff --git a/src/components/views/rooms/WhoIsTypingTile.js b/src/components/views/rooms/WhoIsTypingTile.js
index a25b43fc3a..396d64a6f8 100644
--- a/src/components/views/rooms/WhoIsTypingTile.js
+++ b/src/components/views/rooms/WhoIsTypingTile.js
@@ -204,7 +204,7 @@ export default class WhoIsTypingTile extends React.Component {
             this.props.whoIsTypingLimit,
         );
         if (!typingString) {
-            return (<div className="mx_WhoIsTypingTile_empty" />);
+            return null;
         }
 
         return (