make left panel adapt to width

includes using flexbox in the room tile to avoid hardcoded width

res/css/structures/_LeftPanel.scss

@@ -15,24 +15,16 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_LeftPanel {
-    position: relative;
-
-    display: flex;
-    flex-direction: column;
-
-    border-right: 1px solid $panel-divider-color;
-}
-
 .mx_LeftPanel_container {
     display: flex;
     /* LeftPanel 260px */
-    flex: 0 0 260px;
+    min-width: 260px;
+    flex: 0 0 auto;
 }
 
 .mx_LeftPanel_container.mx_LeftPanel_container_hasTagPanel {
     /* TagPanel 70px + LeftPanel 260px */
-    flex: 0 0 330px;
+    flex: 0 0 auto;
 }
 
 .mx_LeftPanel_container_collapsed {
@@ -42,7 +34,7 @@ limitations under the License.
 
 .mx_LeftPanel_container_collapsed.mx_LeftPanel_container_hasTagPanel {
     /* TagPanel 70px + Collapsed LeftPanel 70px */
-    flex: 0 0 140px;
+    flex: 0 0 auto;
 }
 
 .mx_LeftPanel_hideButton {
@@ -57,6 +49,17 @@ limitations under the License.
 
 }
 
+.mx_LeftPanel {
+    background-color: $secondary-accent-color;
+    flex: 1;
+    position: relative;
+
+    display: flex;
+    flex-direction: column;
+
+    border-right: 1px solid $panel-divider-color;
+}
+
 .mx_LeftPanel .mx_AppTile_mini {
     height: 132px;
 }

res/css/structures/_MatrixChat.scss

@@ -68,19 +68,7 @@ limitations under the License.
     transform: translateX(-50%);
 }
 
-.mx_MatrixChat .mx_LeftPanel {
-    order: 1;
-    background-color: $secondary-accent-color;
-    flex: 0 0 260px;
-}
-
-.mx_MatrixChat .mx_LeftPanel.collapsed {
-    flex: 0 0 60px;
-}
-
 .mx_MatrixChat .mx_MatrixChat_middlePanel {
-    order: 2;
-
     background-color: $primary-bg-color;
 
     flex: 1;
@@ -102,8 +90,6 @@ limitations under the License.
 }
 
 .mx_MatrixChat .mx_RightPanel {
-    order: 3;
-
     flex: 0 0 235px;
 }
 

res/css/structures/_RoomSubList.scss

@@ -29,7 +29,6 @@ limitations under the License.
 
 .mx_RoomSubList_labelContainer {
     height: 31px; /* mx_RoomSubList_label height including border */
-    width: 235px; /* LHS Panel width */
     position: relative;
 }
 
@@ -39,7 +38,6 @@ limitations under the License.
     color: $roomsublist-label-fg-color;
     font-weight: 700;
     font-size: 12px;
-    width: 203px; /* padding + width = LHS Panel width */
     height: 19px; /* height + padding = 31px = mx_RoomSubList_label height */
     margin-left: 16px;
     padding-left: 16px; /* gutter */

res/css/views/rooms/_RoomTile.scss

@@ -15,9 +15,10 @@ limitations under the License.
 */
 
 .mx_RoomTile {
-    position: relative;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
     cursor: pointer;
-    display: block;
     height: 40px;
     margin: 0px 9px 0px 9px;
 
@@ -31,26 +32,14 @@ limitations under the License.
     left: -12px;
 }
 
-
-.mx_RoomTile_nameContainer {
-    display: inline-block;
-    width: 180px;
-    height: 24px;
-}
-
-.mx_RoomTile_avatar_container {
-    position: relative;
-}
-
 .mx_RoomTile_avatar {
-    display: inline-block;
+    flex: 0;
     padding-top: 4px;
     padding-bottom: 4px;
     padding-left: 14px;
     padding-right: 12px;
     width: 32px;
     height: 32px;
-    vertical-align: middle;
 }
 
 .mx_RoomTile_dm {
@@ -62,19 +51,13 @@ limitations under the License.
 }
 
 .mx_RoomTile_name {
-    display: inline-block;
+    flex: 1 5 auto;
     font-size: 14px;
     font-weight: 600;
-    position: relative;
-    width: 165px;
-    vertical-align: middle;
-    padding-left: 6px;
-    padding-right: 6px;
-    padding-top: 2px;
-    padding-bottom: 3px;
+    padding: 6px;
     color: $roomtile-name-color;
     white-space: nowrap;
-    overflow: hidden;
+    overflow-x: hidden;
     text-overflow: ellipsis;
 }
 
@@ -82,16 +65,11 @@ limitations under the License.
 /*    color: rgba(69, 69, 69, 0.5); */
 }
 
-.collapsed .mx_RoomTile_nameContainer {
-    width: 60px; /* colapsed panel width */
-}
-
 .collapsed .mx_RoomTile_name {
     display: none;
 }
 
 .collapsed .mx_RoomTile_badge {
-    top: 0px;
     min-width: 12px;
     border-radius: 16px;
     padding: 0px 4px 0px 4px;
@@ -116,10 +94,9 @@ limitations under the License.
 }
 
 .mx_RoomTile_badge {
-    display: inline-block;
+    flex: 0 1 content;
     min-width: 15px;
     height: 15px;
-    position: absolute;
     right: 8px; /*gutter */
     top: 9px;
     border-radius: 8px;