Merge branch 'develop' of github.com:matrix-org/matrix-react-sdk into t3chguy/fix/18969

 Conflicts:

	src/components/views/dialogs/LeaveSpaceDialog.tsx

	src/i18n/strings/en_EN.json

res/css/_animations.scss

@@ -34,18 +34,43 @@ limitations under the License.
     transition: opacity 300ms ease;
 }
 
-
 @keyframes mx--anim-pulse {
     0% { opacity: 1; }
     50% { opacity: 0.7; }
     100% { opacity: 1; }
 }
 
+@keyframes mx_Dialog_lightbox_background_keyframes {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: $lightbox-background-bg-opacity;
+    }
+}
+
+@keyframes mx_ImageView_panel_keyframes {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
 
 @media (prefers-reduced-motion) {
     @keyframes mx--anim-pulse {
         // Override all keyframes in reduced-motion
     }
+
+    @keyframes mx_Dialog_lightbox_background_keyframes {
+        // Override all keyframes in reduced-motion
+    }
+
+    @keyframes mx_ImageView_panel_keyframes {
+        // Override all keyframes in reduced-motion
+    }
+
     .mx_rtg--fade-enter-active {
         transition: none;
     }

res/css/_common.scss

@@ -318,6 +318,8 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
 .mx_Dialog_lightbox .mx_Dialog_background {
     opacity: $lightbox-background-bg-opacity;
     background-color: $lightbox-background-bg-color;
+    animation-name: mx_Dialog_lightbox_background_keyframes;
+    animation-duration: 300ms;
 }
 
 .mx_Dialog_lightbox .mx_Dialog {

res/css/structures/_RoomDirectory.scss

@@ -183,3 +183,40 @@ limitations under the License.
         padding: 0;
     }
 }
+
+@media screen and (max-width: 700px) {
+    .mx_RoomDirectory_roomMemberCount {
+        padding: 0px;
+    }
+
+    .mx_AccessibleButton_kind_secondary {
+        padding: 0px !important;
+    }
+
+    .mx_RoomDirectory_join {
+        margin-left: 0px;
+    }
+
+    .mx_RoomDirectory_alias {
+        margin-top: 10px;
+        margin-bottom: 10px;
+    }
+
+    .mx_RoomDirectory_roomDescription {
+        padding-bottom: 0px;
+    }
+
+    .mx_RoomDirectory_name {
+        margin-bottom: 5px;
+    }
+
+    .mx_RoomDirectory_roomAvatar {
+        margin-top: 10px;
+    }
+
+    .mx_RoomDirectory_table {
+        grid-template-columns: auto;
+        row-gap: 14px;
+        margin-top: 5px;
+    }
+}

res/css/views/elements/_ImageView.scss

@@ -18,6 +18,10 @@ $button-size: 32px;
 $icon-size: 22px;
 $button-gap: 24px;
 
+:root {
+    --image-view-panel-height: 68px;
+}
+
 .mx_ImageView {
     display: flex;
     width: 100%;
@@ -36,14 +40,24 @@ $button-gap: 24px;
 
 .mx_ImageView_image {
     flex-shrink: 0;
+
+    &.mx_ImageView_image_animating {
+        transition: transform 200ms ease 0s;
+    }
+
+    &.mx_ImageView_image_animatingLoading {
+        transition: transform 300ms ease 0s;
+    }
 }
 
 .mx_ImageView_panel {
     width: 100%;
-    height: 68px;
+    height: var(--image-view-panel-height);
     display: flex;
     justify-content: space-between;
     align-items: center;
+    animation-name: mx_ImageView_panel_keyframes;
+    animation-duration: 300ms;
 }
 
 .mx_ImageView_info_wrapper {
@@ -124,3 +138,13 @@ $button-gap: 24px;
         mask-size: 40%;
     }
 }
+
+@media (prefers-reduced-motion) {
+    .mx_ImageView_image_animating {
+        transition: none !important;
+    }
+
+    .mx_ImageView_image_animatingLoading {
+        transition: none !important;
+    }
+}

res/css/views/rooms/_EventTile.scss

@@ -732,6 +732,11 @@ $hover-select-border: 4px;
         margin-top: 0;
         padding-bottom: 5px;
         margin-bottom: 5px;
+
+        .mx_MessageTimestamp {
+            left: auto;
+            right: 0;
+        }
     }
 
     .mx_MessageComposer_sendMessage {

res/css/views/rooms/_MessageComposer.scss

@@ -185,16 +185,26 @@ limitations under the License.
     }
 }
 
+.mx_ContextualMenu {
+    .mx_MessageComposer_button {
+        padding-left: calc(var(--size) + 6px);
+    }
+}
+
 .mx_MessageComposer_button {
     --size: 26px;
     position: relative;
-    margin-right: 6px;
     cursor: pointer;
     height: var(--size);
     line-height: var(--size);
     width: auto;
-    padding-left: calc(var(--size) + 5px);
+    padding-left: var(--size);
     border-radius: 100%;
+    margin-right: 6px;
+
+    &:last-child {
+        margin-right: auto;
+    }
 
     &::before {
         content: '';