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 {