Redesign: move right panel below room/group header

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.

res/css/structures/_RoomView.scss

@@ -16,20 +16,10 @@ limitations under the License.
 
 .mx_RoomView {
     word-wrap: break-word;
-    position: relative;
-
     display: flex;
-    width: 100%;
-
     flex-direction: column;
 }
 
-.mx_RoomView .mx_RoomHeader {
-    order: 1;
-
-    flex: 0 0 52px;
-}
-
 .mx_RoomView_fileDropTarget {
     min-width: 0px;
     width: 100%;
@@ -62,15 +52,11 @@ limitations under the License.
 }
 
 .mx_RoomView_auxPanel {
-    order: 2;
-
     min-width: 0px;
     width: 100%;
     margin: 0px auto;
 
     overflow: auto;
-    border-bottom: 1px solid $primary-hairline-color;
-
     flex: 0 0 auto;
 }
 
@@ -79,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

@@ -14,6 +14,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+.mx_RoomHeader {
+    flex: 0 0 52px;
+    border-bottom: 1px solid $primary-hairline-color;
+}
+
 /* add 20px to the height of the header when editing */
 .mx_RoomHeader_editing {
     flex: 0 0 93px ! important;

src/PageTypes.js

@@ -20,7 +20,6 @@ export default {
     HomePage: "home_page",
     RoomView: "room_view",
     UserSettings: "user_settings",
-    CreateRoom: "create_room",
     RoomDirectory: "room_directory",
     UserView: "user_view",
     GroupView: "group_view",