vicious rewrite of the CSS to support the notifications toolbar, removing all height: 100%'s and letting the flexbox stuff calculate auto-height instead. may have slowed down the rendering, especially when the toolbar is visible

skins/base/css/molecules/MatrixToolbar.css

@@ -15,10 +15,14 @@ limitations under the License.
 */
 
 .mx_MatrixToolbar {
+    width: 100%;
     text-align: center;
-    height: 25px;
-    background-color: #a9dbf4;
-    border-bottom: 1px solid #000;
+    background-color: #ff0064;
+    color: #fff;
+    font-weight: bold;
     padding: 6px;
-    z-index: 50;
+}
+
+.mx_MatrixToolbar button {
+    margin-left: 12px;
 }

skins/base/css/molecules/MemberTile.css

@@ -37,12 +37,15 @@ limitations under the License.
     background-color: #dbdbdb;
 }
 
+.mx_MemberTile_inviteEditing {
+    display: initial ! important;
+}
+
 .mx_MemberTile_inviteEditing .mx_MemberTile_avatar {
     display: none;
 }
 
 .mx_MemberTile_inviteEditing .mx_MemberTile_name {
-    position: absolute;
     width: 200px;
 }
 

skins/base/css/organisms/RoomDirectory.css

@@ -15,8 +15,9 @@ limitations under the License.
 */
 
 .mx_RoomDirectory {
-    max-width: 720px;
-    margin: auto;
+    width: 720px;
+    margin-left: auto;
+    margin-right: auto;
 }
 
 .mx_RoomDirectory_input {

skins/base/css/organisms/RoomView.css

@@ -24,7 +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/organisms/UserSettings.css

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 .mx_UserSettings {
-    max-width: 720px;
-    margin: auto;
+    width: 720px;
+    margin-left: auto;
+    margin-right: auto;
 }

skins/base/css/pages/MatrixChat.css

@@ -14,8 +14,35 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+.mx_MatrixChat_wrapper {
+    display: -webkit-box;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;    
+
+    flex-direction: column;
+    -webkit-flex-direction: column;
+
+    width: 100%;
+    height: 100%;
+}
+
+.mx_MatrixToolbar {
+    -webkit-box-ordinal-group: 1;
+    -moz-box-ordinal-group: 1;
+    -ms-flex-order: 1;
+    -webkit-order: 1;
+    order: 1;
+
+    height: 21px;
+}
+
+.mx_MatrixChat_toolbarShowing {
+    height: auto;
+}
+
 .mx_MatrixChat {
-    position: relative;
     width: 100%;
     height: 100%;
 
@@ -24,6 +51,15 @@ limitations under the License.
     display: -ms-flexbox;
     display: -webkit-flex;
     display: flex;
+
+    -webkit-box-ordinal-group: 2;
+    -moz-box-ordinal-group: 2;
+    -ms-flex-order: 2;
+    -webkit-order: 2;
+    order: 2;
+
+    -webkit-flex: 1;
+    flex: 1;
 }
 
 .mx_MatrixChat .mx_LeftPanel {
@@ -35,7 +71,6 @@ limitations under the License.
 
     -webkit-flex: 0 0 230px;
     flex: 0 0 230px;
-    height: 100%;
 }
 
 .mx_MatrixChat .mx_MatrixChat_middlePanel {
@@ -49,7 +84,20 @@ limitations under the License.
     padding-right: 12px;
     background-color: #f3f8fa;
     width: 100%;
-    height: 100%;
+
+    /* XXX: Hack: apparently if you try to nest a flex-box
+     * within a non-flex-box within a flex-box, the height
+     * of the innermost element gets miscalculated if the
+     * parents are both auto.
+     * Ideally we'd launch straight into the RoomView at this
+     * point, but instead we fudge it and make the middlePanel
+     * flex itself.
+     */
+    display: -webkit-box;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
 }
 
 .mx_MatrixChat .mx_RightPanel {
@@ -62,5 +110,5 @@ limitations under the License.
     background-color: #f3f8fa;
     -webkit-flex: 0 0 230px;
     flex: 0 0 230px;
-    height: 100%;
+    height: 100%; 
 }