Update vector-im (#31306)

* Update vector-im * Update Jest snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix playwright styling overrides Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Hold back Compound Design Tokens as threads icons unexpectedly grew a dot in the top corner where we conditionally draw a dot Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update Compound Design Tokens to 6.4.1 Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Revert snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Tweak bubble Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update storybook snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update jest snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update jest snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
2025-12-02 09:57:28 +00:00
parent 2e87f7cb90
commit 99178bce86
118 changed files with 736 additions and 747 deletions
--- a/res/css/views/elements/_Pill.pcss
+++ b/res/css/views/elements/_Pill.pcss
@@ -57,7 +57,7 @@ Please see LICENSE files in the repository root for full details.
        margin-inline-end: 0.2em;
        min-width: $font-16px; /* ensure the avatar is not compressed */
        user-select: text;
-        vertical-align: -2.5px;
+        vertical-align: top;
    }

    .mx_Pill_text {
--- a/res/css/views/rooms/_EventBubbleTile.pcss
+++ b/res/css/views/rooms/_EventBubbleTile.pcss
@@ -50,7 +50,7 @@ Please see LICENSE files in the repository root for full details.
        margin-right: 0;
    }

-    .mx_EventTile_avatar {
+    &:not(.mx_EventTile_info) .mx_EventTile_avatar {
        line-height: 0;
        border: 4px solid $background;
        border-radius: 50%;
@@ -588,6 +588,7 @@ Please see LICENSE files in the repository root for full details.
        position: static;
        order: -1;
        margin-inline-end: var(--EventTile_bubble_gap-inline); /* Same spacing between E2E icon and a hidden event */
+        display: inline-flex;
    }

    .mx_EventTile_e2eIcon {
--- a/res/css/views/rooms/_EventTile.pcss
+++ b/res/css/views/rooms/_EventTile.pcss
@@ -296,13 +296,11 @@ $left-gutter: 64px;
            display: flex;
            align-items: center;

-            /* Need to use important to override the js provided height and width values. */
+            /* Need to use important to override the js calculated values. */
            > .mx_BaseAvatar,
            > .mx_BaseAvatar > * {
-                height: $font-14px !important;
-                width: $font-14px !important;
                font-size: $font-10px !important;
-                line-height: $font-15px !important;
+                line-height: calc($font-15px - 2px) !important;
            }
        }

@@ -1166,11 +1164,11 @@ $left-gutter: 64px;
        &.mx_EventTile_info {
            .mx_EventTile_avatar {
                position: absolute;
-                top: 1.5px; /* Align with hidden event content */
-                margin-top: 0;
+                /* Align with hidden event content */
+                top: 50%;
+                transform: translateY(-50%);
+                margin-top: -2px;
                margin-bottom: 0;
-                width: 14px; /* avatar img size */
-                height: 14px; /* avatar img size */
            }

            &.mx_EventTile_selected .mx_EventTile_line,
--- a/res/css/views/rooms/_ReadReceiptGroup.pcss
+++ b/res/css/views/rooms/_ReadReceiptGroup.pcss
@@ -41,11 +41,12 @@ Please see LICENSE files in the repository root for full details.
        height: 100%;

        .mx_BaseAvatar {
+            /* Compound uses a border on default avatars but no border on actual images, we want a border in all cases */
            box-sizing: content-box;
+            border: 1px solid $background !important;
+            /* Reset the line height as we are no longer box-sizing border-box */
+            line-height: var(--cpd-avatar-size);
            position: absolute;
-            border: 1px solid $background;
-            width: 14px;
-            height: 14px;
            will-change: left, top;
            transition:
                left var(--transition-short) ease-out,
--- a/res/css/views/rooms/_ReplyTile.pcss
+++ b/res/css/views/rooms/_ReplyTile.pcss
@@ -134,7 +134,8 @@ Please see LICENSE files in the repository root for full details.
        }

        .mx_BaseAvatar {
-            line-height: 14px; /* To match size */
+            /* Prevent crushing by the flexbox */
+            flex-shrink: 0;
        }
    }
 }