diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss index 6e648d4e579..c3752c87529 100644 --- a/res/css/views/rooms/_EventBubbleTile.scss +++ b/res/css/views/rooms/_EventBubbleTile.scss @@ -486,30 +486,48 @@ limitations under the License. margin-left: -9px; } - /* Special layout scenario for "Unable To Decrypt (UTD)" events */ - &.mx_EventTile_bad > .mx_EventTile_line { - display: grid; - grid-template: - "reply reply" auto - "shield body" auto - "shield link" auto - / auto 1fr; + &.mx_EventTile_bad { + /* Special layout scenario for "Unable To Decrypt (UTD)" events */ + .mx_EventTile_line { + display: grid; + grid-template: + "reply reply" auto + "shield body" auto + "shield link" auto + / auto 1fr; + + .mx_EventTile_e2eIcon { + grid-area: shield; + } - .mx_EventTile_e2eIcon { - grid-area: shield; - } + .mx_UnknownBody { + grid-area: body; + } - .mx_UnknownBody { - grid-area: body; - } + .mx_EventTile_keyRequestInfo { + grid-area: link; + } - .mx_EventTile_keyRequestInfo { - grid-area: link; + .mx_ReplyChain_wrapper { + grid-area: reply; + min-width: 0; // Prevent a grid blowout due to nowrap displayName + } } - .mx_ReplyChain_wrapper { - grid-area: reply; - min-width: 0; // Prevent a grid blowout due to nowrap displayName + &.mx_EventTile_info { + // "Unable To Decrypt" layout for hidden events + .mx_EventTile_line { + gap: 0 9px; // 9px: margin value of E2E icon + align-items: center; + grid-template: + "shield source" auto + "shield link" auto + / auto 1fr; + + .mx_ViewSourceEvent { + grid-area: source; + } + } } }