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

@@ -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 {