From 7c57680b93db3afeb9f52a65a5302d66d79a56b9 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 2 Jun 2022 02:43:07 +0000 Subject: [PATCH] Fix read avatars overflow from the right chat panel with a maximized widget on bubble message layout (#8470) * Fix RR overflow on the right chat panel Signed-off-by: Suguru Hirahara * Align with RR outside of info tile Signed-off-by: Suguru Hirahara * Use inset-inline property Signed-off-by: Suguru Hirahara --- res/css/views/right_panel/_TimelineCard.scss | 21 ++++++++++++++------ res/css/views/rooms/_EventBubbleTile.scss | 11 ++++++---- res/css/views/rooms/_ReadReceiptGroup.scss | 2 ++ 3 files changed, 24 insertions(+), 10 deletions(-) diff --git a/res/css/views/right_panel/_TimelineCard.scss b/res/css/views/right_panel/_TimelineCard.scss index 3bc71040811..e2711b8c594 100644 --- a/res/css/views/right_panel/_TimelineCard.scss +++ b/res/css/views/right_panel/_TimelineCard.scss @@ -92,7 +92,8 @@ limitations under the License. } .mx_EventTile_msgOption { - margin-right: 2px; + // Override mx_EventTile_msgOption of mx_EventTile:not([data-layout="bubble"]) + margin-inline-end: 0; } &.mx_EventTile_info { @@ -149,11 +150,19 @@ limitations under the License. flex-basis: 48px; // 12 (padding on message list) + 36 (padding on event lines) } - &.mx_BaseCard { - // For a chat timeline on the right panel when the widget is maximised - // TODO: rename ThreadPanel - &.mx_ThreadPanel { - padding-right: 8px; // .mx_RightPanel padding + .mx_GenericEventListSummary_unstyledList, // RR next to a message on the event list summary + .mx_RoomView_MessageList { // RR next to a message on the messsge list + .mx_EventTile[data-layout=bubble] { + .mx_ReadReceiptGroup { + // 6px: scroll bar width (magic number) + inset-inline-end: calc(-1 * var(--ReadReceiptGroup_EventBubbleTile-spacing-end) + $container-gap-width + 6px); + } + + &.mx_EventTile_info { + .mx_ReadReceiptGroup { + inset-inline-end: -4px; // align with RR outside of info tile + } + } } } } diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss index 75071366fac..c6a6c276c8d 100644 --- a/res/css/views/rooms/_EventBubbleTile.scss +++ b/res/css/views/rooms/_EventBubbleTile.scss @@ -539,8 +539,10 @@ limitations under the License. .mx_ReadReceiptGroup { position: absolute; + // as close to right gutter without clipping as possible - right: -78px; + inset-inline-end: calc(-1 * var(--ReadReceiptGroup_EventBubbleTile-spacing-end)); + // (EventTileLine.line-height - ReadReceiptGroup.height) / 2 // this centers the ReadReceiptGroup if we’ve got a single line bottom: calc(($font-18px - 24px) / 2); @@ -691,15 +693,16 @@ limitations under the License. .mx_MessageActionBar { inset-inline-start: initial; // Reset .mx_EventTile[data-layout="bubble"][data-self="false"] .mx_MessageActionBar - right: 48px; // align with that of right-column bubbles + inset-inline-end: 48px; // align with that of right-column bubbles } .mx_ReadReceiptGroup { - right: -18px; // match alignment to RRs of chat bubbles + // match alignment to RRs of chat bubbles + inset-inline-end: calc(-1 * var(--ReadReceiptGroup_EventBubbleTile-spacing-end) + 60px); } &::before { - right: 0; // match alignment of the hover background to that of chat bubbles + inset-inline-end: 0; // match alignment of the hover background to that of chat bubbles } } } diff --git a/res/css/views/rooms/_ReadReceiptGroup.scss b/res/css/views/rooms/_ReadReceiptGroup.scss index fe40b1263f3..33f47506400 100644 --- a/res/css/views/rooms/_ReadReceiptGroup.scss +++ b/res/css/views/rooms/_ReadReceiptGroup.scss @@ -15,6 +15,8 @@ limitations under the License. */ .mx_ReadReceiptGroup { + --ReadReceiptGroup_EventBubbleTile-spacing-end: 78px; + position: relative; display: inline-block; // This aligns the avatar with the last line of the