Manage style rules of ReadReceiptGroup position on one file (#8993)

* Specify positon of RR on IRC layout on _EventTile.scss

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Manage a declaration for position of RR on modern/group layout on _EventTile.scss, instead of applying it as a default one

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Use logical properties

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Include mx_ReadReceiptGroup in mx_EventTile_msgOption to prevent a regression

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Manage style blocks of mx_ReadReceiptGroup for every layout on one file

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Use logical properties

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Include mx_ReadReceiptGroup in mx_EventTile_msgOption for bubble layout same as the other layouts

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Include mx_ReadReceiptGroup in mx_EventTile_msgOption on TimelineCard

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

res/css/views/right_panel/_TimelineCard.scss

@@ -74,6 +74,10 @@ limitations under the License.
 
             .mx_EventTile_msgOption {
                 margin-inline-end: 0;
+
+                .mx_ReadReceiptGroup {
+                    top: var(--TimelineCard_ReadReceiptGroup-inset-block-start);
+                }
             }
 
             .mx_DisambiguatedProfile,
@@ -100,10 +104,6 @@ limitations under the License.
                 margin-inline-end: $spacing-8; // See: var(--ThreadView_group_spacing-end) for ReactionsRow on _EventTile.scss
             }
 
-            .mx_ReadReceiptGroup {
-                top: var(--TimelineCard_ReadReceiptGroup-inset-block-start);
-            }
-
             .mx_ThreadSummary {
                 margin-inline-end: 0;
                 max-width: min(calc(100% - 36px), 600px);

res/css/views/rooms/_EventBubbleTile.scss

@@ -527,18 +527,6 @@ limitations under the License.
         }
     }
 
-    .mx_ReadReceiptGroup {
-        position: absolute;
-
-        // as close to right gutter without clipping as possible
-        inset-inline-end: calc(-1 * var(--ReadReceiptGroup_EventBubbleTile-spacing-end));
-
-        // (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;
-    }
-
     .mx_MTextBody {
         max-width: 100%;
     }

res/css/views/rooms/_EventTile.scss

@@ -250,6 +250,12 @@ $left-gutter: 64px;
     &[data-layout=irc] {
         --EventTile_irc_line_info-inset-inline-start: calc(var(--name-width) + 10px + var(--icon-width));
 
+        .mx_EventTile_msgOption {
+            .mx_ReadReceiptGroup {
+                inset-block-start: -0.3rem; // ($irc-line-height - avatar height) / 2
+            }
+        }
+
         .mx_MessageTimestamp {
             text-align: right;
         }
@@ -303,7 +309,14 @@ $left-gutter: 64px;
         }
 
         .mx_EventTile_msgOption {
-            margin-right: 10px;
+            margin-inline-end: 10px;
+
+            .mx_ReadReceiptGroup {
+                // This aligns the avatar with the last line of the
+                // message. We want to move it one line up
+                // See .mx_EventTile[data-layout=group] .mx_EventTile_line in _EventTile.scss
+                inset-block-start: calc(-$font-22px - 3px);
+            }
         }
 
         .mx_MessageTimestamp {
@@ -390,6 +403,20 @@ $left-gutter: 64px;
     }
 
     &[data-layout=bubble] {
+        .mx_EventTile_msgOption {
+            .mx_ReadReceiptGroup {
+                position: absolute;
+                inset-block-start: auto;
+
+                // as close to right gutter without clipping as possible
+                inset-inline-end: calc(-1 * var(--ReadReceiptGroup_EventBubbleTile-spacing-end));
+
+                // (EventTileLine.line-height - ReadReceiptGroup.height) / 2
+                // this centers the ReadReceiptGroup if we’ve got a single line
+                inset-block-end: calc(($font-18px - 24px) / 2);
+            }
+        }
+
         .mx_EventTileBubble {
             // Timestamps are inside the tile, so the width can be less constrained
             max-width: 600px;
@@ -1221,10 +1248,12 @@ $left-gutter: 64px;
                 font-size: $font-13px;
             }
 
-            .mx_ReadReceiptGroup {
-                // This aligns the avatar with the last line of the
-                // message. We want to move it one line up - 2rem
-                top: -2rem;
+            .mx_EventTile_msgOption {
+                .mx_ReadReceiptGroup {
+                    // This aligns the avatar with the last line of the
+                    // message. We want to move it one line up - 2rem
+                    inset-block-start: -2rem;
+                }
             }
 
             .mx_EventTile_content .markdown-body {

res/css/views/rooms/_IRCLayout.scss

@@ -44,10 +44,6 @@ $irc-line-height: $font-18px;
         .mx_EventTile_msgOption {
             order: 5;
             flex-shrink: 0;
-
-            .mx_ReadReceiptGroup {
-                top: -0.3rem; // ($irc-line-height - avatar height) / 2
-            }
         }
 
         .mx_EventTile_line,

res/css/views/rooms/_ReadReceiptGroup.scss

@@ -19,10 +19,6 @@ limitations under the License.
 
     position: relative;
     display: inline-block;
-    // This aligns the avatar with the last line of the
-    // message. We want to move it one line up
-    // See .mx_EventTile[data-layout=group] .mx_EventTile_line in _EventTile.scss
-    top: calc(-$font-22px - 3px);
     user-select: none;
     z-index: 1;