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/_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 {