From 37d8cfbc505bfba688b4101843cbb70a8c3de952 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sun, 3 Jul 2022 00:51:57 +0900 Subject: [PATCH] Fix read receipts group position on TimelineCard in compact modern/group layout (#8971) --- res/css/views/right_panel/_TimelineCard.scss | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/res/css/views/right_panel/_TimelineCard.scss b/res/css/views/right_panel/_TimelineCard.scss index 255daf3703..63048511d5 100644 --- a/res/css/views/right_panel/_TimelineCard.scss +++ b/res/css/views/right_panel/_TimelineCard.scss @@ -50,6 +50,8 @@ limitations under the License. &[data-layout=irc], &[data-layout=group] { + --TimelineCard_ReadReceiptGroup-inset-block-start: -6px; + &.mx_EventTile_info .mx_EventTile_line, .mx_EventTile_line { padding: var(--BaseCard_EventTile_line-padding-block) var(--BaseCard_EventTile-spacing-inline); @@ -97,6 +99,10 @@ limitations under the License. margin-inline-end: $spacing-8; // See: var(--ThreadView_group_spacing-end) for ReactionsRow on _EventTile.scss } + .mx_ReadReceiptGroup { + top: var(--TimelineCard_ReadReceiptGroup-inset-block-start); + } + .mx_ThreadSummary { margin-inline-end: 0; max-width: min(calc(100% - 36px), 600px); @@ -110,6 +116,15 @@ limitations under the License. } } + &[data-layout=group] { + // Read receipt group on compact modern layout + // This is required because mx_TimelineCard is a child element wrapped by mx_MatrixChat_useCompactLayout, + // which specifies the default position of mx_ReadReceiptGroup on compact modern layout. + .mx_MatrixChat_useCompactLayout & .mx_ReadReceiptGroup { + top: var(--TimelineCard_ReadReceiptGroup-inset-block-start); + } + } + &[data-layout=bubble] { &::before { z-index: auto; // enable background color on hover @@ -141,10 +156,6 @@ limitations under the License. } } - .mx_ReadReceiptGroup { - top: -6px; - } - .mx_WhoIsTypingTile { margin-left: -12px; // undo padding on the message list }