Merge remote-tracking branch 'upstream/develop' into feature/image-view-load-anim/18186

res/css/views/beta/_BetaCard.scss

@@ -113,6 +113,7 @@ $dot-size: 12px;
     animation: mx_Beta_bluePulse 2s infinite;
     animation-iteration-count: 20;
     position: relative;
+    pointer-events: none;
 
     &::after {
         content: "";

res/css/views/elements/_Field.scss

@@ -98,14 +98,14 @@ limitations under the License.
     transition:
         font-size 0.25s ease-out 0.1s,
         color 0.25s ease-out 0.1s,
-        top 0.25s ease-out 0.1s,
+        transform 0.25s ease-out 0.1s,
         background-color 0.25s ease-out 0.1s;
     color: $primary-content;
     background-color: transparent;
     font-size: $font-14px;
+    transform: translateY(0);
     position: absolute;
     left: 0px;
-    top: 0px;
     margin: 7px 8px;
     padding: 2px;
     pointer-events: none; // Allow clicks to fall through to the input
@@ -124,10 +124,10 @@ limitations under the License.
     transition:
         font-size 0.25s ease-out 0s,
         color 0.25s ease-out 0s,
-        top 0.25s ease-out 0s,
+        transform 0.25s ease-out 0s,
         background-color 0.25s ease-out 0s;
     font-size: $font-10px;
-    top: -13px;
+    transform: translateY(-13px);
     padding: 0 2px;
     background-color: $field-focused-label-bg-color;
     pointer-events: initial;

res/css/views/rooms/_Autocomplete.scss

@@ -7,7 +7,6 @@
     background: $background;
     border-bottom: none;
     border-radius: 8px 8px 0 0;
-    max-height: 35vh;
     overflow: clip;
     display: flex;
     flex-direction: column;
@@ -64,6 +63,7 @@
     margin: 12px;
     height: 100%;
     overflow-y: scroll;
+    max-height: 35vh;
 }
 
 .mx_Autocomplete_Completion_container_truncate {

res/css/views/rooms/_EventBubbleTile.scss

@@ -23,11 +23,11 @@ limitations under the License.
 }
 
 .mx_EventTile[data-layout=bubble] {
-
     position: relative;
     margin-top: var(--gutterSize);
-    margin-left: 50px;
+    margin-left: 49px;
     margin-right: 100px;
+    font-size: $font-14px;
 
     &.mx_EventTile_continuation {
         margin-top: 2px;
@@ -77,10 +77,11 @@ limitations under the License.
         max-width: 70%;
     }
 
-    .mx_SenderProfile {
+    > .mx_SenderProfile {
         position: relative;
         top: -2px;
         left: 2px;
+        font-size: $font-15px;
     }
 
     &[data-self=false] {
@@ -113,8 +114,6 @@ limitations under the License.
 
         .mx_ReplyTile .mx_SenderProfile {
             display: block;
-            top: unset;
-            left: unset;
         }
 
         .mx_ReactionsRow {
@@ -287,6 +286,8 @@ limitations under the License.
     .mx_EventTile_line,
     .mx_EventTile_info {
         min-width: 100%;
+        // Preserve alignment with left edge of text in bubbles
+        margin: 0;
     }
 
     .mx_EventTile_e2eIcon {
@@ -294,9 +295,10 @@ limitations under the License.
     }
 
     .mx_EventTile_line > a {
+        // Align timestamps with those of normal bubble tiles
         right: auto;
-        top: -15px;
-        left: -68px;
+        top: -11px;
+        left: -95px;
     }
 }
 
@@ -326,11 +328,10 @@ limitations under the License.
     }
 
     .mx_EventTile_line {
-        margin: 0 5px;
+        margin: 0;
         > a {
-            left: auto;
-            right: 0;
-            transform: translateX(calc(100% + 5px));
+            // Align timestamps with those of normal bubble tiles
+            left: -76px;
         }
     }
 
@@ -340,7 +341,8 @@ limitations under the License.
 }
 
 .mx_EventListSummary[data-expanded=false][data-layout=bubble] {
-    padding: 0 34px;
+    // Align with left edge of bubble tiles
+    padding: 0 49px;
 }
 
 /* events that do not require bubble layout */

res/css/views/rooms/_RoomSublist.scss

@@ -172,14 +172,12 @@ limitations under the License.
         }
     }
 
-    // In the general case, we leave height of headers alone even if sticky, so
-    // that the sublists below them do not jump. However, that leaves a gap
-    // when scrolled to the top above the first sublist (whose header can only
-    // ever stick to top), so we force height to 0 for only that first header.
-    // See also https://github.com/vector-im/element-web/issues/14429.
-    &:first-child .mx_RoomSublist_headerContainer {
-        height: 0;
-        padding-bottom: 4px;
+    // In the general case, we reserve space for each sublist header to prevent
+    // scroll jumps when they become sticky. However, that leaves a gap when
+    // scrolled to the top above the first sublist (whose header can only ever
+    // stick to top), so we make sure to exclude the first visible sublist.
+    &:not(.mx_RoomSublist_hidden) ~ .mx_RoomSublist .mx_RoomSublist_headerContainer {
+        height: 24px;
     }
 
     .mx_RoomSublist_resizeBox {

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

@@ -21,6 +21,17 @@ limitations under the License.
 
     .mx_SettingsTab_section {
         margin-bottom: 30px;
+
+        > details {
+            > summary {
+                cursor: pointer;
+                color: $primary-content;
+            }
+
+            & + .mx_SettingsFlag {
+                margin-top: 20px;
+            }
+        }
     }
 
     .mx_PreferencesUserSettingsTab_CommunityMigrator {