Fix broken RoomView CSS due to name clashes and splitting an element in

two.

skins/base/css/organisms/RoomView.css

@@ -24,6 +24,7 @@ limitations under the License.
     display: -webkit-flex;
     display: flex;
     width: 100%;
+    height: 100%;
     flex-direction: column;
     -webkit-flex-direction: column;
 }

skins/base/css/pages/MatrixChat.css

@@ -38,7 +38,7 @@ limitations under the License.
     height: 100%;
 }
 
-.mx_MatrixChat .mx_MainView {
+.mx_MatrixChat .mx_MatrixChat_MiddleView {
     -webkit-box-ordinal-group: 2;
     -moz-box-ordinal-group: 2;
     -ms-flex-order: 2;

skins/base/views/pages/MatrixChat.js

@@ -51,7 +51,7 @@ module.exports = React.createClass({
             return (
                 <div className="mx_MatrixChat">
                     <LeftPanel selectedRoom={this.state.currentRoom} />
-                    <div className="mx_MainView">
+                    <div className="mx_MatrixChat_MiddleView">
                         {page_element}
                     </div>
                     {right_panel}