From 5c2a80a88c7ecfe618b524edd650fdfd80031ec3 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 29 Apr 2022 06:30:35 +0000 Subject: [PATCH 1/3] Fix RR overflow on the right chat panel Signed-off-by: Suguru Hirahara --- res/css/views/right_panel/_TimelineCard.scss | 22 ++++++++++++++------ res/css/views/rooms/_EventBubbleTile.scss | 7 +++++-- res/css/views/rooms/_ReadReceiptGroup.scss | 2 ++ 3 files changed, 23 insertions(+), 8 deletions(-) diff --git a/res/css/views/right_panel/_TimelineCard.scss b/res/css/views/right_panel/_TimelineCard.scss index 13dd5af6af0..cc6438397d4 100644 --- a/res/css/views/right_panel/_TimelineCard.scss +++ b/res/css/views/right_panel/_TimelineCard.scss @@ -90,7 +90,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 { @@ -141,11 +142,20 @@ 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 { + // Remove the position style for an event line on the chat panel on bubble message layout + inset-inline-end: 0; + } + } } } } diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss index a4814c3faf8..bf6153ae987 100644 --- a/res/css/views/rooms/_EventBubbleTile.scss +++ b/res/css/views/rooms/_EventBubbleTile.scss @@ -452,8 +452,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); @@ -603,7 +605,8 @@ limitations under the License. } .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 { 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 From e53e4add7370ee18cd1900d246a7e2655fc03841 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 13 May 2022 12:17:55 +0900 Subject: [PATCH 2/3] Align with RR outside of info tile Signed-off-by: Suguru Hirahara --- res/css/views/right_panel/_TimelineCard.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/res/css/views/right_panel/_TimelineCard.scss b/res/css/views/right_panel/_TimelineCard.scss index cc6438397d4..2709c927013 100644 --- a/res/css/views/right_panel/_TimelineCard.scss +++ b/res/css/views/right_panel/_TimelineCard.scss @@ -152,8 +152,7 @@ limitations under the License. &.mx_EventTile_info { .mx_ReadReceiptGroup { - // Remove the position style for an event line on the chat panel on bubble message layout - inset-inline-end: 0; + inset-inline-end: -4px; // align with RR outside of info tile } } } From 9ffbafad2ec535eebd8d0c59f0ef45c2fd1c34a4 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 20 May 2022 13:02:41 +0900 Subject: [PATCH 3/3] Use inset-inline property Signed-off-by: Suguru Hirahara --- 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 f09d29db797..b4bab80c7dd 100644 --- a/res/css/views/rooms/_EventBubbleTile.scss +++ b/res/css/views/rooms/_EventBubbleTile.scss @@ -632,7 +632,7 @@ 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 { @@ -641,7 +641,7 @@ limitations under the License. } &::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 } } }