move rightpanel into group view

res/css/structures/_GroupView.scss

@@ -15,10 +15,6 @@ limitations under the License.
 */
 
 .mx_GroupView {
-    max-width: 960px;
-    width: 100%;
-    margin-left: auto;
-    margin-right: auto;
     display: flex;
     flex-direction: column;
     overflow: hidden;
@@ -29,7 +25,6 @@ limitations under the License.
 }
 
 .mx_GroupView_header {
-    max-width: 960px;
     min-height: 70px;
     align-items: center;
     display: flex;
@@ -162,6 +157,11 @@ limitations under the License.
     line-height: 2em;
 }
 
+.mx_GroupView > .mx_MainSplit {
+    flex: 1;
+    display: flex;
+}
+
 .mx_GroupView_body  {
     flex-grow: 1;
 }

res/css/structures/_MatrixChat.scss

@@ -69,7 +69,8 @@ limitations under the License.
     transform: translateX(-50%);
 }
 
-.mx_MatrixChat .mx_MatrixChat_middlePanel {
+/* not the left panel, and not the resize handle, so the roomview/groupview/... */
+.mx_MatrixChat > :not(.mx_LeftPanel_container):not(.mx_ResizeHandle) {
     background-color: $primary-bg-color;
 
     flex: 1;
@@ -81,8 +82,6 @@ limitations under the License.
        */
     overflow-x: auto;
 
-    display: flex;
-
     /* To fix https://github.com/vector-im/riot-web/issues/3298 where Safari
        needed height 100% all the way down to the HomePage. Height does not
        have to be auto, empirically.

src/components/structures/GroupView.js

@@ -25,6 +25,8 @@ import { sanitizedHtmlNode } from '../../HtmlUtils';
 import { _t, _td } from '../../languageHandler';
 import AccessibleButton from '../views/elements/AccessibleButton';
 import GroupHeaderButtons from '../views/right_panel/GroupHeaderButtons';
+import MainSplit from './MainSplit';
+import RightPanel from './RightPanel';
 import Modal from '../../Modal';
 import classnames from 'classnames';
 
@@ -1281,6 +1283,8 @@ export default React.createClass({
                 }
             }
 
+            const rightPanel = !this.props.collapsedRhs ? <RightPanel groupId={this.props.groupId} /> : undefined;
+
             const headerClasses = {
                 mx_GroupView_header: true,
                 mx_GroupView_header_view: !this.state.editing,
@@ -1308,10 +1312,12 @@ export default React.createClass({
                         </div>
                         <GroupHeaderButtons />
                     </div>
-                    <GeminiScrollbarWrapper className="mx_GroupView_body">
+                    <MainSplit collapsedRhs={this.props.collapsedRhs} panel={rightPanel}>
-                        { this._getMembershipSection() }
+                        <GeminiScrollbarWrapper className="mx_GroupView_body">
-                        { this._getGroupSection() }
+                            { this._getMembershipSection() }
-                    </GeminiScrollbarWrapper>
+                            { this._getGroupSection() }
+                        </GeminiScrollbarWrapper>
+                    </MainSplit>
                 </div>
             );
         } else if (this.state.error) {