Merge pull request #4749 from matrix-org/travis/room-list/layout

Fix various layout concerns with the new room list

res/css/structures/_LeftPanel2.scss

@@ -131,6 +131,11 @@ $roomListMinimizedWidth: 50px;
         .mx_LeftPanel2_actualRoomListContainer {
             flex-grow: 1; // fill the available space
             overflow-y: auto;
+            width: 100%;
+            max-width: 100%;
+
+            // Create a flexbox to trick the layout engine
+            display: flex;
         }
     }
 }

res/css/views/rooms/_NotificationBadge.scss

@@ -28,7 +28,6 @@ limitations under the License.
 
     &.mx_NotificationBadge_visible {
         background-color: $roomtile2-badge-color;
-        margin-right: 14px;
 
         // Create a flexbox to order the count a bit easier
         display: flex;
@@ -46,7 +45,6 @@ limitations under the License.
             width: 6px;
             height: 6px;
             border-radius: 6px;
-            margin-right: 8px;
         }
 
         &.mx_NotificationBadge_2char {

res/css/views/rooms/_RoomList2.scss

@@ -17,9 +17,11 @@ limitations under the License.
 // TODO: Rename to mx_RoomList during replacement of old component
 
 .mx_RoomList2 {
+    width: calc(100% - 16px); // 16px of artificial right-side margin (8px is overflowed from the sublists)
+
     // Create a column-based flexbox for the sublists. That's pretty much all we have to
     // worry about in this stylesheet.
     display: flex;
     flex-direction: column;
-    flex-wrap: wrap;
+    flex-wrap: nowrap; // let the column overflow
 }

res/css/views/rooms/_RoomSublist2.scss

@@ -21,7 +21,7 @@ limitations under the License.
     display: flex;
     flex-direction: column;
 
-    padding-left: 8px;
+    margin-left: 8px;
     margin-top: 12px;
     margin-bottom: 12px;
     width: 100%;
@@ -30,16 +30,18 @@ limitations under the License.
         // Create a flexbox to make ordering easy
         display: flex;
         align-items: center;
+        padding-bottom: 8px;
+        height: 24px;
 
         .mx_RoomSublist2_badgeContainer {
             opacity: 0.8;
-            padding-right: 7px;
+            width: 16px;
+            margin-right: 5px; // aligns with the room tile's badge
 
-            // Create another flexbox row because it's super easy to position the badge at
+            // Create another flexbox row because it's super easy to position the badge this way.
-            // the end this way.
             display: flex;
             align-items: center;
-            justify-content: flex-end;
+            justify-content: center;
         }
 
         // Both of these buttons are hidden by default until the list is hovered
@@ -77,10 +79,9 @@ limitations under the License.
             opacity: 0.5;
             line-height: $font-16px;
             font-size: $font-12px;
-            padding-bottom: 8px;
 
-            width: 100%;
             flex: 1;
+            max-width: calc(100% - 16px); // 16px is the badge width
 
             // Ellipsize any text overflow
             text-overflow: ellipsis;
@@ -158,7 +159,7 @@ limitations under the License.
             // either side of the list. We define this after the positioning to
             // trick the browser.
             margin-left: 4px;
-            margin-right: 8px;
+            margin-right: 4px;
         }
     }
 
@@ -184,7 +185,7 @@ limitations under the License.
             &:not(.mx_RoomSublist2_headerContainer_withAux) {
                 // The menu button will be the rightmost button, so make it correctly aligned.
                 .mx_RoomSublist2_menuButton {
-                    margin-right: 16px;
+                    margin-right: 1px; // line it up with the badges on the room tiles
                 }
             }
 
@@ -218,7 +219,7 @@ limitations under the License.
             // Show the aux button, but not the list button
             width: 24px;
             height: 24px;
-            margin-right: 16px;
+            margin-right: 1px; // line it up with the badges on the room tiles
             visibility: visible;
         }
     }

res/css/views/rooms/_RoomTile2.scss

@@ -18,9 +18,7 @@ limitations under the License.
 
 // Note: the room tile expects to be in a flexbox column container
 .mx_RoomTile2 {
-    width: calc(100% - 21px); // 10px for alignment/inset, 8px for padding on sides, 3px for margin
     margin-bottom: 4px;
-    margin-right: 3px;
     padding: 4px;
 
     // The tile is also a flexbox row itself
@@ -84,7 +82,7 @@ limitations under the License.
         // the end this way.
         display: flex;
         align-items: center;
-        justify-content: flex-end;
+        justify-content: center;
     }
 
     // The menu button is hidden by default

src/components/views/rooms/RoomSublist2.tsx

@@ -237,11 +237,11 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
                             >
                                 <span>{this.props.label}</span>
                             </AccessibleButton>
+                            {this.renderMenu()}
+                            {addRoomButton}
                             <div className="mx_RoomSublist2_badgeContainer">
                                 {badge}
                             </div>
-                            {this.renderMenu()}
-                            {addRoomButton}
                         </div>
                     );
                 }}