put RightPanel as sibling of .mx_RoomView_body instead of RoomView

res/css/structures/_RoomView.scss

@@ -16,11 +16,7 @@ limitations under the License.
 
 .mx_RoomView {
     word-wrap: break-word;
-    position: relative;
-
     display: flex;
-    width: 100%;
-
     flex-direction: column;
 }
 
@@ -56,8 +52,6 @@ limitations under the License.
 }
 
 .mx_RoomView_auxPanel {
-    order: 2;
-
     min-width: 0px;
     width: 100%;
     margin: 0px auto;
@@ -71,13 +65,17 @@ limitations under the License.
 }
 
 
-.mx_RoomView_body {
-    order: 3;
+.mx_RoomView .mx_MainSplit {
     flex: 1 1 0;
-    flex-direction: column;
     display: flex;
 }
 
+.mx_RoomView_body {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+}
+
 .mx_RoomView_body .mx_RoomView_topUnreadMessagesBar {
     order: 1;
 }

res/css/views/rooms/_MemberList.scss

@@ -24,7 +24,7 @@ limitations under the License.
 }
 
 .mx_MemberList .mx_Spinner {
-    flex: 0 0 auto;
+    flex: 1 0 auto;
 }
 
 .mx_MemberList_chevron {

res/css/views/rooms/_RoomHeader.scss

@@ -15,7 +15,6 @@ limitations under the License.
 */
 
 .mx_RoomHeader {
-    order: 1;
     flex: 0 0 52px;
     border-bottom: 1px solid $primary-hairline-color;
 }

src/components/structures/LoggedInView.js

@@ -418,7 +418,6 @@ const LoggedInView = React.createClass({
 
     render: function() {
         const LeftPanel = sdk.getComponent('structures.LeftPanel');
-        const RightPanel = sdk.getComponent('structures.RightPanel');
         const RoomView = sdk.getComponent('structures.RoomView');
         const UserSettings = sdk.getComponent('structures.UserSettings');
         const RoomDirectory = sdk.getComponent('structures.RoomDirectory');
@@ -449,9 +448,6 @@ const LoggedInView = React.createClass({
                         collapsedRhs={this.props.collapseRhs}
                         ConferenceHandler={this.props.ConferenceHandler}
                     />;
-                if (!this.props.collapseRhs) {
-                    right_panel = <RightPanel roomId={this.props.currentRoomId} disabled={this.props.rightDisabled} />;
-                }
                 break;
 
             case PageTypes.UserSettings:
@@ -562,7 +558,6 @@ const LoggedInView = React.createClass({
                         <main className='mx_MatrixChat_middlePanel'>
                             { page_element }
                         </main>
-                        <ResizeHandle reverse={true}/>
                         { right_panel }
                     </div>
                 </DragDropContext>

src/components/structures/RoomView.js

@@ -43,6 +43,8 @@ const Rooms = require('../../Rooms');
 
 import { KeyCode, isOnlyCtrlOrCmdKeyEvent } from '../../Keyboard';
 
+import MainSplit from './MainSplit';
+import RightPanel from './RightPanel';
 import RoomViewStore from '../../stores/RoomViewStore';
 import RoomScrollStateStore from '../../stores/RoomScrollStateStore';
 import WidgetEchoStore from '../../stores/WidgetEchoStore';
@@ -1812,6 +1814,8 @@ module.exports = React.createClass({
             },
         );
 
+        const rightPanel = this.state.room ? <RightPanel roomId={this.state.room.roomId} /> : undefined;
+
         return (
             <div className={"mx_RoomView" + (inCall ? " mx_RoomView_inCall" : "")} ref="roomView">
                 <RoomHeader ref="header" room={this.state.room} searchInfo={searchInfo}
@@ -1828,19 +1832,21 @@ module.exports = React.createClass({
                     onForgetClick={(myMembership === "leave") ? this.onForgetClick : null}
                     onLeaveClick={(myMembership === "join") ? this.onLeaveClick : null}
                 />
-                <div className={fadableSectionClasses}>
-                    { auxPanel }
-                    { topUnreadMessagesBar }
-                    { messagePanel }
-                    { searchResultsPanel }
-                    <div className={statusBarAreaClass}>
-                        <div className="mx_RoomView_statusAreaBox">
-                            <div className="mx_RoomView_statusAreaBox_line"></div>
-                            { statusBar }
+                <MainSplit panel={rightPanel} collapsedRhs={this.props.collapsedRhs}>
+                    <div className={fadableSectionClasses}>
+                        { auxPanel }
+                        { topUnreadMessagesBar }
+                        { messagePanel }
+                        { searchResultsPanel }
+                        <div className={statusBarAreaClass}>
+                            <div className="mx_RoomView_statusAreaBox">
+                                <div className="mx_RoomView_statusAreaBox_line"></div>
+                                { statusBar }
+                            </div>
                         </div>
+                        { messageComposer }
                     </div>
-                    { messageComposer }
-                </div>
+                </MainSplit>
             </div>
         );
     },