From 1188f1a5082bc47346ddc8022899e1bbad6a8dbf Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
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 <luixxiul@users.noreply.github.com>

* Use a variable to ensure the same spacing around the E2E icon

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Apply the style to E2E icon

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Rename variables

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---
 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 {