From 1188f1a5082bc47346ddc8022899e1bbad6a8dbf Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 15 Jun 2022 15:50:35 +0000 Subject: [PATCH] Remove margin from E2E icon between avatar and hidden event (#8584) * Remove margin from warning E2E icon between an avatar and a hidden event Signed-off-by: Suguru Hirahara * Use a variable to ensure the same spacing around the E2E icon Signed-off-by: Suguru Hirahara * Apply the style to E2E icon Signed-off-by: Suguru Hirahara * Rename variables Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventBubbleTile.scss | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss index 8d338102b7..62cf27ab45 100644 --- a/res/css/views/rooms/_EventBubbleTile.scss +++ b/res/css/views/rooms/_EventBubbleTile.scss @@ -55,6 +55,7 @@ limitations under the License. .mx_EventTile[data-layout=bubble] { --EventTile_bubble-margin-inline-start: 49px; --EventTile_bubble-margin-inline-end: 60px; + --EventTile_bubble_gap-inline: 5px; position: relative; margin-top: var(--gutterSize); @@ -268,12 +269,12 @@ limitations under the License. } .mx_EventTile_line { - --EventBubbleTile_line-margin-inline-end: -12px; + --EventTile_bubble_line-margin-inline-end: -12px; position: relative; display: flex; - gap: 5px; - margin: 0 var(--EventBubbleTile_line-margin-inline-end) 0 -9px; + gap: 5px var(--EventTile_bubble_gap-inline); + margin: 0 var(--EventTile_bubble_line-margin-inline-end) 0 -9px; border-top-left-radius: var(--cornerRadius); border-top-right-radius: var(--cornerRadius); @@ -600,7 +601,7 @@ limitations under the License. .mx_EventTile_avatar { position: static; order: -1; - margin-right: 5px; + margin-inline-end: var(--EventTile_bubble_gap-inline); // Same spacing between E2E icon and a hidden event } .mx_EventTile_line, @@ -611,7 +612,8 @@ limitations under the License. } .mx_EventTile_e2eIcon { - margin-left: 9px; + margin-inline-start: 0; // mx_EventTile_avatar has margin-inline-end, so margin is not needed here + align-self: center; } .mx_EventTile_line {