correctly align read receipts to state events in bubble layout (#8419)

justjanne · web-flow · commit 6120adaeddb5 · 2022-04-28T15:39:17.000+02:00
diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss
@@ -449,8 +449,11 @@ limitations under the License.
 
     .mx_ReadReceiptGroup {
         position: absolute;
-        right: -78px; // as close to right gutter without clipping as possible
-        bottom: 0;
+        // as close to right gutter without clipping as possible
+        right: -78px;
+        // (EventTileLine.line-height - ReadReceiptGroup.height) / 2
+        // this centers the ReadReceiptGroup if we’ve got a single line
+        bottom: calc(($font-18px - 24px) / 2);
         top: auto;
     }
 
@@ -586,7 +589,7 @@ limitations under the License.
         }
 
         .mx_ReadReceiptGroup {
-            right: -14px; // match alignment to RRs of chat bubbles
+            right: -18px; // match alignment to RRs of chat bubbles
         }
 
         &::before {

Original file line number	Diff line number	Diff line change
`@@ -449,8 +449,11 @@ limitations under the License.`
`449`	`449`
`450`	`450`	`.mx_ReadReceiptGroup {`
`451`	`451`	`position: absolute;`
`452`		`- right: -78px; // as close to right gutter without clipping as possible`
`453`		`- bottom: 0;`
	`452`	`+ // as close to right gutter without clipping as possible`
	`453`	`+ right: -78px;`
	`454`	`+ // (EventTileLine.line-height - ReadReceiptGroup.height) / 2`
	`455`	`+ // this centers the ReadReceiptGroup if we’ve got a single line`
	`456`	`+ bottom: calc(($font-18px - 24px) / 2);`
`454`	`457`	`top: auto;`
`455`	`458`	`}`
`456`	`459`
`@@ -586,7 +589,7 @@ limitations under the License.`
`586`	`589`	`}`
`587`	`590`
`588`	`591`	`.mx_ReadReceiptGroup {`
`589`		`- right: -14px; // match alignment to RRs of chat bubbles`
	`592`	`+ right: -18px; // match alignment to RRs of chat bubbles`
`590`	`593`	`}`
`591`	`594`
`592`	`595`	`&::before {`