Remove extraenous DOM nodes

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);
     }
 }
 

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,
+            });
         }
-
+        return toast
-        const containerClasses = classNames("mx_ToastContainer", {
+            ? (
-            "mx_ToastContainer_stacked": isStacked,
+                <div className={containerClasses} role="alert">
-        });
+                    {toast}
-
+                </div>
-        return (
+            )
-            <div className={containerClasses} role="alert">
+            : null;
-                {toast}
-            </div>
-        );
     }
 }

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 mx_RoomHeader_wrapper light-panel" aria-owns="mx_RightPanel">
-                <div className="mx_RoomHeader_wrapper" aria-owns="mx_RightPanel">
+                <div className="mx_RoomHeader_avatar">{ roomAvatar }</div>
-                    <div className="mx_RoomHeader_avatar">{ roomAvatar }</div>
+                <div className="mx_RoomHeader_e2eIcon">{ e2eIcon }</div>
-                    <div className="mx_RoomHeader_e2eIcon">{ e2eIcon }</div>
+                { name }
-                    { name }
+                { topicElement }
-                    { topicElement }
+                { cancelButton }
-                    { cancelButton }
+                { rightRow }
-                    { rightRow }
+                <RoomHeaderButtons />
-                    <RoomHeaderButtons />
-                </div>
             </div>
         );
     }

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 mx_RoomHeader_wrapper" >
-                <div className="mx_RoomHeader_wrapper">
+                <div className="mx_RoomHeader_simpleHeader">
-                    <div className="mx_RoomHeader_simpleHeader">
+                    { icon }
-                        { icon }
+                    { this.props.title }
-                        { this.props.title }
+                    { cancelButton }
-                        { cancelButton }
-                    </div>
                 </div>
             </div>
         );

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 (