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/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%; 
 }