Fix read avatars overflow from the right chat panel with a maximized …

…widget on bubble message layout (#8470) * Fix RR overflow on the right chat panel Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Align with RR outside of info tile Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use inset-inline property Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
matrix-org · Jun 2, 2022 · 7c57680 · 7c57680
1 parent 6574c5c
commit 7c57680
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 10 deletions.
diff --git a/res/css/views/right_panel/_TimelineCard.scss b/res/css/views/right_panel/_TimelineCard.scss
@@ -92,7 +92,8 @@ limitations under the License.
         }
 
         .mx_EventTile_msgOption {
-            margin-right: 2px;
+            // Override mx_EventTile_msgOption of mx_EventTile:not([data-layout="bubble"])
+            margin-inline-end: 0;
         }
 
         &.mx_EventTile_info {
@@ -149,11 +150,19 @@ limitations under the License.
         flex-basis: 48px; // 12 (padding on message list) + 36 (padding on event lines)
     }
 
-    &.mx_BaseCard {
-        // For a chat timeline on the right panel when the widget is maximised
-        // TODO: rename ThreadPanel
-        &.mx_ThreadPanel {
-            padding-right: 8px; // .mx_RightPanel padding
+    .mx_GenericEventListSummary_unstyledList, // RR next to a message on the event list summary
+    .mx_RoomView_MessageList {                // RR next to a message on the messsge list
+        .mx_EventTile[data-layout=bubble] {
+            .mx_ReadReceiptGroup {
+                // 6px: scroll bar width (magic number)
+                inset-inline-end: calc(-1 * var(--ReadReceiptGroup_EventBubbleTile-spacing-end) + $container-gap-width + 6px);
+            }
+
+            &.mx_EventTile_info {
+                .mx_ReadReceiptGroup {
+                    inset-inline-end: -4px; // align with RR outside of info tile
+                }
+            }
         }
     }
 }
diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss
@@ -539,8 +539,10 @@ limitations under the License.
 
     .mx_ReadReceiptGroup {
         position: absolute;
+
         // as close to right gutter without clipping as possible
-        right: -78px;
+        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);
@@ -691,15 +693,16 @@ limitations under the License.
 
             .mx_MessageActionBar {
                 inset-inline-start: initial; // Reset .mx_EventTile[data-layout="bubble"][data-self="false"] .mx_MessageActionBar
-                right: 48px; // align with that of right-column bubbles
+                inset-inline-end: 48px; // align with that of right-column bubbles
             }
 
             .mx_ReadReceiptGroup {
-                right: -18px; // match alignment to RRs of chat bubbles
+                // match alignment to RRs of chat bubbles
+                inset-inline-end: calc(-1 * var(--ReadReceiptGroup_EventBubbleTile-spacing-end) + 60px);
             }
 
             &::before {
-                right: 0; // match alignment of the hover background to that of chat bubbles
+                inset-inline-end: 0; // match alignment of the hover background to that of chat bubbles
             }
         }
     }

diff --git a/res/css/views/rooms/_ReadReceiptGroup.scss b/res/css/views/rooms/_ReadReceiptGroup.scss
@@ -15,6 +15,8 @@ limitations under the License.
 */
 
 .mx_ReadReceiptGroup {
+    --ReadReceiptGroup_EventBubbleTile-spacing-end: 78px;
+
     position: relative;
     display: inline-block;
     // This aligns the avatar with the last line of the