diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index abb7cbf6bf7..facf9046162 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -782,10 +782,12 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss // Display notification dot &[data-notification]::before { + $notification-inset-block-start: 14px; // 14px: align the dot with the timestamp row + width: $notification-dot-size; height: $notification-dot-size; border-radius: 50%; - inset: 14px $spacing-8 auto auto; // 14px: align the dot with the timestamp row + inset: $notification-inset-block-start $spacing-8 auto auto; } &[data-notification=total]::before { @@ -1076,7 +1078,9 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss .mx_EventTile { // Override :not([data-layout="bubble"]) &[data-layout=group] { - padding-top: $spacing-4; + --MatrixChat_useCompactLayout_group-padding-top: $spacing-4; + + padding-top: var(--MatrixChat_useCompactLayout_group-padding-top); &.mx_EventTile_info { padding-top: 0; // same as the padding for non-compact .mx_EventTile.mx_EventTile_info @@ -1152,6 +1156,10 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss } } } + + &[data-shape=ThreadsList][data-notification]::before { + inset-block-start: calc($notification-inset-block-start - var(--MatrixChat_useCompactLayout_group-padding-top)); + } } }