Merge branch 'develop' into t3chguy/fix/6606

res/css/structures/_RoomView.scss

@@ -222,7 +222,6 @@ limitations under the License.
 
 .mx_RoomView_MessageList li {
     clear: both;
-    contain: content;
 }
 
 li.mx_RoomView_myReadMarker_container {
@@ -239,6 +238,7 @@ hr.mx_RoomView_myReadMarker {
     position: relative;
     top: -1px;
     z-index: 1;
+    will-change: width;
     transition: width 400ms easeinsine 1s, opacity 400ms easeinsine 1s;
     width: 99%;
     opacity: 1;

res/css/views/rooms/_IRCLayout.scss

@@ -115,8 +115,7 @@ $irc-line-height: $font-18px;
         .mx_EventTile_line {
             .mx_EventTile_e2eIcon,
             .mx_TextualEvent,
-            .mx_MTextBody,
-            .mx_ReplyThread_wrapper_empty {
+            .mx_MTextBody {
                 display: inline-block;
             }
         }
@@ -177,16 +176,13 @@ $irc-line-height: $font-18px;
     .mx_SenderProfile_hover {
         background-color: $primary-bg-color;
         overflow: hidden;
+        display: flex;
 
-        > span {
-            display: flex;
-
-            > .mx_SenderProfile_name {
-                overflow: hidden;
-                text-overflow: ellipsis;
-                min-width: var(--name-width);
-                text-align: end;
-            }
+        > .mx_SenderProfile_name {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            min-width: var(--name-width);
+            text-align: end;
         }
     }
 

res/css/views/rooms/_RoomBreadcrumbs.scss

@@ -32,14 +32,14 @@ limitations under the License.
     // first triggering the enter state with the newest breadcrumb off screen (-40px) then
     // sliding it into view.
     &.mx_RoomBreadcrumbs-enter {
-        margin-left: -40px; // 32px for the avatar, 8px for the margin
+        transform: translateX(-40px); // 32px for the avatar, 8px for the margin
     }
     &.mx_RoomBreadcrumbs-enter-active {
-        margin-left: 0;
+        transform: translateX(0);
 
         // Timing function is as-requested by design.
         // NOTE: The transition time MUST match the value passed to CSSTransition!
-        transition: margin-left 640ms cubic-bezier(0.66, 0.02, 0.36, 1);
+        transition: transform 640ms cubic-bezier(0.66, 0.02, 0.36, 1);
     }
 
     .mx_RoomBreadcrumbs_placeholder {

res/css/views/rooms/_RoomTile.scss

@@ -19,7 +19,7 @@ limitations under the License.
     margin-bottom: 4px;
     padding: 4px;
 
-    contain: strict;
+    contain: content; // Not strict as it will break when resizing a sublist vertically
     height: 40px;
     box-sizing: border-box;