diff --git a/res/css/views/rooms/_RoomTile2.scss b/res/css/views/rooms/_RoomTile2.scss index 44c5b6ee17..144a5ccf86 100644 --- a/res/css/views/rooms/_RoomTile2.scss +++ b/res/css/views/rooms/_RoomTile2.scss @@ -23,7 +23,6 @@ limitations under the License. // The tile is also a flexbox row itself display: flex; - flex-wrap: wrap; &.mx_RoomTile2_selected, &:hover, &.mx_RoomTile2_hasMenuOpen { background-color: $roomtile2-selected-bg-color; @@ -43,7 +42,8 @@ limitations under the License. .mx_RoomTile2_nameContainer { flex-grow: 1; - max-width: calc(100% - 58px); // 32px avatar, 18px badge area, 8px margin on avatar + min-width: 0; // allow flex to shrink it + margin-right: 8px; // spacing to buttons/badges // Create a new column layout flexbox for the name parts display: flex; @@ -81,8 +81,20 @@ limitations under the License. } } + //.mx_RoomTile2_badgeContainer, + .mx_RoomTile2_menuButton, + .mx_RoomTile2_notificationsButton { + width: 20px; + min-width: 20px; // yay flex + height: 20px; + margin: auto 0; + } + + .mx_RoomTile2_menuButton { + margin-left: 4px; // spacing between buttons + } + .mx_RoomTile2_badgeContainer { - width: 18px; height: 32px; // Create another flexbox row because it's super easy to position the badge at @@ -90,14 +102,15 @@ limitations under the License. display: flex; align-items: center; justify-content: center; + + .mx_NotificationBadge { + margin-right: 2px; + } } // The context menu buttons are hidden by default .mx_RoomTile2_menuButton, .mx_RoomTile2_notificationsButton { - width: 20px; - height: 20px; - margin: auto 0 auto 8px; position: relative; display: none; @@ -130,7 +143,7 @@ limitations under the License. .mx_RoomTile2_badgeContainer { width: 0; height: 0; - visibility: hidden; + display: none; } .mx_RoomTile2_notificationsButton,