Fix: Message shield alignment is not right. (#11703)

manancodes · web-flow · commit 6d1aea49dbe3 · 2023-10-17T07:01:37.000Z
* Message shield alignment fixed

* Alignment fixed in all layouts

* Fixed for all font sizes
diff --git 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
@@ -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 {

Original file line number	Diff line number	Diff line change
`@@ -332,6 +332,9 @@ limitations under the License.`
`332`	`332`
`333`	`333`	`.mx_EventTile_e2eIcon {`
`334`	`334`	`flex-shrink: 0; /* keep it at full size */`
	`335`	`+`
	`336`	`+ // Keep height equal to text for shield alignment, additional 2px because of 1px padding on text`
	`337`	`+ height: calc($font-18px + 2px);`
`335`	`338`	`}`
`336`	`339`	`}`
`337`	`340`
Original file line number	Diff line number	Diff line change
`@@ -485,7 +485,11 @@ $left-gutter: 64px;`
`485`	`485`	`}`
`486`	`486`
`487`	`487`	`.mx_EventTile_e2eIcon {`
`488`		`- inset: 6px 0 0 44px;`
	`488`	`+ inset: 0 0 0 44px;`
	`489`	`+`
	`490`	`+ // Keep height equal to text for alignment`
	`491`	`+ height: var(--EventTile_group_line-line-height);`
	`492`	`+ margin: 1px;`
`489`	`493`	`}`
`490`	`494`
`491`	`495`	`.mx_EventTile_msgOption {`
`@@ -1350,7 +1354,6 @@ $left-gutter: 64px;`
`1350`	`1354`	`.mx_EventTile[data-layout="group"] {`
`1351`	`1355`	`--MatrixChat_useCompactLayout_group-padding-top: $spacing-4;`
`1352`	`1356`	`--MatrixChat_useCompactLayout-top-avatar: 2px;`
`1353`		`- --MatrixChat_useCompactLayout-top-e2eIcon: 3px;`
`1354`	`1357`	`--MatrixChat_useCompactLayout_line-spacing-block: 0px;`
`1355`	`1358`
`1356`	`1359`	`padding-top: var(--MatrixChat_useCompactLayout_group-padding-top);`
`@@ -1410,7 +1413,7 @@ $left-gutter: 64px;`
`1410`	`1413`	`}`
`1411`	`1414`
`1412`	`1415`	`.mx_EventTile_e2eIcon {`
`1413`		`- top: var(--MatrixChat_useCompactLayout-top-e2eIcon);`
	`1416`	`+ margin: 0px;`
`1414`	`1417`	`}`
`1415`	`1418`
`1416`	`1419`	`.mx_DisambiguatedProfile {`