diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index fa9838ac7af..270975d0148 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -1091,15 +1091,25 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss // Override :not([data-layout="bubble"]) &[data-layout=group] { --MatrixChat_useCompactLayout_group-padding-top: $spacing-4; + --MatrixChat_useCompactLayout-top-avatar: 2px; + --MatrixChat_useCompactLayout-top-e2eIcon: 3px; + --MatrixChat_useCompactLayout_line-spacing-block: 0px; padding-top: var(--MatrixChat_useCompactLayout_group-padding-top); + .mx_EventTile_line, + .mx_EventTile_reply { + padding-block: var(--MatrixChat_useCompactLayout_line-spacing-block); + } + &.mx_EventTile_info { padding-top: 0; // same as the padding for non-compact .mx_EventTile.mx_EventTile_info font-size: $font-13px; + .mx_EventTile_e2eIcon, .mx_EventTile_avatar { - top: $spacing-4; + top: 0; + margin-block: var(--MatrixChat_useCompactLayout_line-spacing-block); } .mx_EventTile_line, @@ -1111,39 +1121,34 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss &.mx_EventTile_emote { padding-top: $spacing-8; // add a bit more space for emotes so that avatars don't collide - &.mx_EventTile_continuation { - padding-top: 0; - - .mx_EventTile_line, - .mx_EventTile_reply { - padding-top: 0; - padding-bottom: 0; - } - } - .mx_EventTile_avatar { - top: 2px; + top: var(--MatrixChat_useCompactLayout-top-avatar); } .mx_EventTile_line, .mx_EventTile_reply { - padding-top: 0; padding-bottom: 1px; } + + &.mx_EventTile_continuation { + .mx_EventTile_line, + .mx_EventTile_reply { + padding-bottom: var(--MatrixChat_useCompactLayout_line-spacing-block); + } + } } - .mx_EventTile_avatar { - top: 2px; + // Cascading - apply zero padding to every element including mx_EventTile_emote + &.mx_EventTile_continuation { + padding-top: var(--MatrixChat_useCompactLayout_line-spacing-block); } - .mx_EventTile_line, - .mx_EventTile_reply { - padding-top: 0; - padding-bottom: 0; + .mx_EventTile_avatar { + top: var(--MatrixChat_useCompactLayout-top-avatar); } .mx_EventTile_e2eIcon { - top: 3px; + top: var(--MatrixChat_useCompactLayout-top-e2eIcon); } .mx_DisambiguatedProfile {