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

matrix-org · Apr 28, 2022 · 6120ada · 6120ada
1 parent 472222c
commit 6120ada
Showing 1 changed file with 6 additions and 3 deletions.
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 {