From abdcf72a40bf2394fa36cab280a8ab3c6aa18cc3 Mon Sep 17 00:00:00 2001 From: Janne Mareike Koschinski Date: Tue, 26 Apr 2022 16:38:25 +0200 Subject: [PATCH 1/2] fix: correctly align read receipts to bubbles --- res/css/views/rooms/_EventBubbleTile.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss index 4329d37c0eb..4170c58c120 100644 --- a/res/css/views/rooms/_EventBubbleTile.scss +++ b/res/css/views/rooms/_EventBubbleTile.scss @@ -450,7 +450,7 @@ limitations under the License. .mx_ReadReceiptGroup { position: absolute; right: -78px; // as close to right gutter without clipping as possible - bottom: 0; + bottom: -1px; top: auto; } @@ -586,7 +586,7 @@ limitations under the License. } .mx_ReadReceiptGroup { - right: -14px; // match alignment to RRs of chat bubbles + right: -18px; // match alignment to RRs of chat bubbles } &::before { From 4dfea3fcd965a93a06bc6074535206528dd2da1f Mon Sep 17 00:00:00 2001 From: Janne Mareike Koschinski Date: Wed, 27 Apr 2022 11:47:27 +0200 Subject: [PATCH 2/2] fix: clarify intent of alignment --- res/css/views/rooms/_EventBubbleTile.scss | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss index 4170c58c120..f99ca941506 100644 --- a/res/css/views/rooms/_EventBubbleTile.scss +++ b/res/css/views/rooms/_EventBubbleTile.scss @@ -449,8 +449,11 @@ limitations under the License. .mx_ReadReceiptGroup { position: absolute; - right: -78px; // as close to right gutter without clipping as possible - bottom: -1px; + // as close to right gutter without clipping as possible + right: -78px; + // (EventTileLine.line-height - ReadReceiptGroup.height) / 2 + // this centers the ReadReceiptGroup if we’ve got a single line + bottom: calc(($font-18px - 24px) / 2); top: auto; }