Merge pull request #2234 from matrix-org/bwindels/roomsectionfixcollapsedsize

Redesign: Fix room lists sizing

res/css/structures/_LeftPanel.scss

@@ -48,10 +48,10 @@ limitations under the License.
 .mx_LeftPanel {
     background-color: $secondary-accent-color;
     flex: 1;
-    position: relative;
     overflow-x: hidden;
     display: flex;
     flex-direction: column;
+    min-height: 0;
 }
 
 .mx_LeftPanel .mx_AppTile_mini {

res/css/structures/_MatrixChat.scss

@@ -54,6 +54,7 @@ limitations under the License.
     order: 2;
 
     flex: 1;
+    min-height: 0;
 }
 
 .mx_MatrixChat_syncError {

res/css/views/rooms/_RoomList.scss

@@ -21,6 +21,7 @@ limitations under the License.
     /* use flexbox to layout sublists */
     display: flex;
     flex-direction: column;
+    min-height: 0;
 }
 
 /* hide resize handles next to collapsed / empty sublists */

src/components/structures/RoomSubList.js

@@ -344,7 +344,7 @@ const RoomSubList = React.createClass({
                 "mx_RoomSubList_nonEmpty": len && !this.state.hidden,
             });
             if (this.state.hidden) {
-                return <div className={subListClasses}>
+                return <div className={subListClasses} style={{flexBasis: "unset", flexGrow: "unset"}}>
                     {this._getHeaderJsx()}
                 </div>;
             } else {

src/resizer/sizer.js

@@ -99,6 +99,7 @@ class Sizer {
 
 class FlexSizer extends Sizer {
     setItemSize(item, size) {
+        item.style.flexGrow = `0`;
         item.style.flexBasis = `${Math.round(size)}px`;
     }
 }