From 6d1aea49dbe3018e3afdeb5c52b3262bec273b5b Mon Sep 17 00:00:00 2001
From: Manan Sadana <manancodes.dev@gmail.com>
Date: Tue, 17 Oct 2023 12:31:37 +0530
Subject: [PATCH] Fix: Message shield alignment is not right. (#11703)

* Message shield alignment fixed

* Alignment fixed in all layouts

* Fixed for all font sizes
---
 res/css/views/rooms/_EventBubbleTile.pcss | 3 +++
 res/css/views/rooms/_EventTile.pcss       | 9 ++++++---
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/res/css/views/rooms/_EventBubbleTile.pcss b/res/css/views/rooms/_EventBubbleTile.pcss
index 8dd6838411..0b16d626c0 100644
--- a/res/css/views/rooms/_EventBubbleTile.pcss
+++ b/res/css/views/rooms/_EventBubbleTile.pcss
@@ -332,6 +332,9 @@ limitations under the License.
 
         .mx_EventTile_e2eIcon {
             flex-shrink: 0; /* keep it at full size */
+
+            // Keep height equal to text for shield alignment, additional 2px because of 1px padding on text
+            height: calc($font-18px + 2px);
         }
     }
 
diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss
index 032daa4839..05e8d5abd6 100644
--- a/res/css/views/rooms/_EventTile.pcss
+++ b/res/css/views/rooms/_EventTile.pcss
@@ -485,7 +485,11 @@ $left-gutter: 64px;
         }
 
         .mx_EventTile_e2eIcon {
-            inset: 6px 0 0 44px;
+            inset: 0 0 0 44px;
+
+            // Keep height equal to text for alignment
+            height: var(--EventTile_group_line-line-height);
+            margin: 1px;
         }
 
         .mx_EventTile_msgOption {
@@ -1350,7 +1354,6 @@ $left-gutter: 64px;
     .mx_EventTile[data-layout="group"] {
         --MatrixChat_useCompactLayout_group-padding-top: $spacing-4;
         --MatrixChat_useCompactLayout-top-avatar: 2px;
-        --MatrixChat_useCompactLayout-top-e2eIcon: 3px;
         --MatrixChat_useCompactLayout_line-spacing-block: 0px;
 
         padding-top: var(--MatrixChat_useCompactLayout_group-padding-top);
@@ -1410,7 +1413,7 @@ $left-gutter: 64px;
         }
 
         .mx_EventTile_e2eIcon {
-            top: var(--MatrixChat_useCompactLayout-top-e2eIcon);
+            margin: 0px;
         }
 
         .mx_DisambiguatedProfile {