message: align badge and make it non-flex when collapsed
diff: @@ -20,8 +20,8 @@ limitations under the License.
  align-items: center;
  cursor: pointer;
  height: 40px;
  - margin: 0px 9px 0px 9px;
  -
  + margin: 0px 3px;
  + position: relative;
  background-color: $secondary-accent-color;
  }
  @@ -69,11 +69,12 @@ limitations under the License.
  /* color: rgba(69, 69, 69, 0.5); */
  }
  -.collapsed .mx_RoomTile_name {
  +.collapsed {
  + .mx_RoomTile_name {
  display: none;
  }
  -.collapsed .mx_RoomTile_badge {
  + .mx_RoomTile_badge {
  min-width: 12px;
  border-radius: 16px;
  padding: 0px 4px 0px 4px;
  @@ -81,10 +82,19 @@ limitations under the License.
  }
  /* Hide the bottom of speech bubble */
  -.collapsed .mx_RoomTile_highlight .mx_RoomTile_badge:after {
  + .mx_RoomTile_highlight .mx_RoomTile_badge:after {
  display: none;
  }
  + .mx_RoomTile_badge {
  + display: block;
  + position: absolute;
  + height: 15px;
  + right: 5px;
  + top: 2px;
  + }
  +}
  +
  /* This is the bottom of the speech bubble */
  .mx_RoomTile_highlight .mx_RoomTile_badge:after {
  content: "";
  @@ -100,9 +110,6 @@ limitations under the License.
  .mx_RoomTile_badge {
  flex: 0 1 content;
  min-width: 15px;
  - height: 15px;
  - right: 8px; /*gutter */
  - top: 9px;
  border-radius: 8px;
  color: $accent-fg-color;
  font-weight: 600;
  