Merge remote-tracking branch 'upstream/develop' into fix/12652/screen-share

res/css/views/messages/_MImageBody.scss

@@ -21,11 +21,7 @@ $timelineImageBorderRadius: 4px;
 }
 
 .mx_MImageBody_thumbnail {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    left: 0;
-    top: 0;
+    object-fit: contain;
     border-radius: $timelineImageBorderRadius;
 
     display: flex;

res/css/views/messages/_MessageActionBar.scss

@@ -107,3 +107,12 @@ limitations under the License.
 .mx_MessageActionBar_cancelButton::after {
     mask-image: url('$(res)/img/element-icons/trashcan.svg');
 }
+
+.mx_MessageActionBar_downloadButton::after {
+    mask-size: 14px;
+    mask-image: url('$(res)/img/download.svg');
+}
+
+.mx_MessageActionBar_downloadButton.mx_MessageActionBar_downloadSpinnerButton::after {
+    background-color: transparent; // hide the download icon mask
+}

res/css/views/rooms/_EventTile.scss

@@ -136,6 +136,10 @@ $hover-select-border: 4px;
         padding-left: calc($left-gutter + 18px);
     }
 
+    & ~ .mx_EventListSummary .mx_EventTile_line {
+        padding-left: calc($left-gutter);
+    }
+
     &.mx_EventTile_selected.mx_EventTile_info .mx_EventTile_line {
         padding-left: calc($left-gutter + 18px - $hover-select-border);
     }
@@ -208,43 +212,11 @@ $hover-select-border: 4px;
         text-decoration: none;
     }
 
-    /* all the overflow-y: hidden; are to trap Zalgos -
-       but they introduce an implicit overflow-x: auto.
-       so make that explicitly hidden too to avoid random
-       horizontal scrollbars occasionally appearing, like in
-       https://github.com/vector-im/vector-web/issues/1154
-        */
-    .mx_EventTile_content {
-        display: block;
-        overflow-y: hidden;
-        overflow-x: hidden;
-        margin-right: 34px;
-    }
-
     /* De-zalgoing */
     .mx_EventTile_body {
         overflow-y: hidden;
     }
 
-    /* Spoiler stuff */
-    .mx_EventTile_spoiler {
-        cursor: pointer;
-    }
-
-    .mx_EventTile_spoiler_reason {
-        color: $event-timestamp-color;
-        font-size: $font-11px;
-    }
-
-    .mx_EventTile_spoiler_content {
-        filter: blur(5px) saturate(0.1) sepia(1);
-        transition-duration: 0.5s;
-    }
-
-    .mx_EventTile_spoiler.visible > .mx_EventTile_spoiler_content {
-        filter: none;
-    }
-
     &:hover.mx_EventTile_verified .mx_EventTile_line,
     &:hover.mx_EventTile_unverified .mx_EventTile_line,
     &:hover.mx_EventTile_unknown .mx_EventTile_line {
@@ -307,6 +279,36 @@ $hover-select-border: 4px;
     }
 }
 
+/* all the overflow-y: hidden; are to trap Zalgos -
+   but they introduce an implicit overflow-x: auto.
+   so make that explicitly hidden too to avoid random
+   horizontal scrollbars occasionally appearing, like in
+   https://github.com/vector-im/vector-web/issues/1154 */
+.mx_EventTile_content {
+    overflow-y: hidden;
+    overflow-x: hidden;
+    margin-right: 34px;
+}
+
+/* Spoiler stuff */
+.mx_EventTile_spoiler {
+    cursor: pointer;
+}
+
+.mx_EventTile_spoiler_reason {
+    color: $event-timestamp-color;
+    font-size: $font-11px;
+}
+
+.mx_EventTile_spoiler_content {
+    filter: blur(5px) saturate(0.1) sepia(1);
+    transition-duration: 0.5s;
+}
+
+.mx_EventTile_spoiler.visible > .mx_EventTile_spoiler_content {
+    filter: none;
+}
+
 .mx_RoomView_timeline_rr_enabled {
 
     .mx_EventTile:not([data-layout=bubble]) {

res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss

@@ -45,6 +45,11 @@ limitations under the License.
     border-radius: 10px;
     padding: 0 16px 9px 16px;
     pointer-events: none;
+    display: flow-root;
+
+    .mx_EventTile[data-layout=bubble] {
+        margin-top: 30px;
+    }
 
     .mx_EventTile_msgOption {
         display: none;