From 43f2ee4283f09e800ccfecf62ad29dc9bb849c40 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Thu, 16 Jun 2022 17:47:37 +0000
Subject: [PATCH] Fix reactions row overflow and gap between reactions (#8813)

---
 .../views/messages/_ReactionsRowButton.scss   |  3 ---
 res/css/views/right_panel/_TimelineCard.scss  |  5 +---
 res/css/views/rooms/_EventBubbleTile.scss     | 27 ++++++++++---------
 res/css/views/rooms/_EventTile.scss           | 12 ++++++---
 4 files changed, 24 insertions(+), 23 deletions(-)

diff --git a/res/css/views/messages/_ReactionsRowButton.scss b/res/css/views/messages/_ReactionsRowButton.scss
index 4bbfc3ed27..138782ddb2 100644
--- a/res/css/views/messages/_ReactionsRowButton.scss
+++ b/res/css/views/messages/_ReactionsRowButton.scss
@@ -17,14 +17,11 @@ limitations under the License.
 .mx_ReactionsRowButton {
     display: inline-flex;
     line-height: $font-20px;
-    margin-right: 6px;
     padding: 1px 6px;
     border: 1px solid $message-action-bar-border-color;
     border-radius: 10px;
     background-color: $header-panel-bg-color;
-    cursor: pointer;
     user-select: none;
-    vertical-align: middle;
 
     &:hover {
         border-color: $reaction-row-button-hover-border-color;
diff --git a/res/css/views/right_panel/_TimelineCard.scss b/res/css/views/right_panel/_TimelineCard.scss
index 5bb5efe9f6..212639b6d5 100644
--- a/res/css/views/right_panel/_TimelineCard.scss
+++ b/res/css/views/right_panel/_TimelineCard.scss
@@ -60,10 +60,7 @@ limitations under the License.
             }
 
             .mx_ReactionsRow {
-                padding: 0;
-
-                // See margin setting of ReactionsRow on _EventTile.scss
-                margin-right: 8px;
+                margin-inline-end: $spacing-8; // See: var(--ThreadView_group_spacing-end) for ReactionsRow on _EventTile.scss
             }
 
             .mx_ThreadSummary {
diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss
index 62cf27ab45..4230102574 100644
--- a/res/css/views/rooms/_EventBubbleTile.scss
+++ b/res/css/views/rooms/_EventBubbleTile.scss
@@ -55,6 +55,8 @@ limitations under the License.
 .mx_EventTile[data-layout=bubble] {
     --EventTile_bubble-margin-inline-start: 49px;
     --EventTile_bubble-margin-inline-end: 60px;
+    --EventTile_bubble_line-margin-inline-start: -9px;
+    --EventTile_bubble_line-margin-inline-end: -12px;
     --EventTile_bubble_gap-inline: 5px;
 
     position: relative;
@@ -177,6 +179,10 @@ limitations under the License.
         border-color: $quinary-content;
     }
 
+    .mx_ReactionsRow {
+        margin-inline: var(--EventTile_bubble_line-margin-inline-start) var(--EventTile_bubble_line-margin-inline-end);
+    }
+
     &[data-self=false] {
         .mx_EventTile_line {
             border-bottom-right-radius: var(--cornerRadius);
@@ -205,6 +211,10 @@ limitations under the License.
             margin-inline-end: auto;
         }
 
+        .mx_ReactionsRow {
+            justify-content: flex-start;
+        }
+
         --backgroundColor: $eventbubble-others-bg;
     }
 
@@ -242,13 +252,10 @@ limitations under the License.
         }
 
         .mx_ReactionsRow {
-            float: right;
-            clear: right;
-            display: flex;
+            justify-content: flex-end;
 
-            /* Moving the "add reaction button" before the reactions */
             > :last-child {
-                order: -1;
+                order: -1; // Moving the "add reaction button" before the reactions
             }
         }
 
@@ -269,12 +276,11 @@ limitations under the License.
     }
 
     .mx_EventTile_line {
-        --EventTile_bubble_line-margin-inline-end: -12px;
-
         position: relative;
         display: flex;
         gap: 5px var(--EventTile_bubble_gap-inline);
-        margin: 0 var(--EventTile_bubble_line-margin-inline-end) 0 -9px;
+        margin-block: 0;
+        margin-inline: var(--EventTile_bubble_line-margin-inline-start) var(--EventTile_bubble_line-margin-inline-end);
         border-top-left-radius: var(--cornerRadius);
         border-top-right-radius: var(--cornerRadius);
 
@@ -481,11 +487,6 @@ limitations under the License.
         }
     }
 
-    .mx_ReactionsRow {
-        margin-right: -18px;
-        margin-left: -9px;
-    }
-
     &.mx_EventTile_bad {
         /* Special layout scenario for "Unable To Decrypt (UTD)" events */
         .mx_EventTile_line {
diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index e3a0d4e399..91cb387e56 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -65,6 +65,13 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
         }
     }
 
+    .mx_ReactionsRow {
+        display: flex;
+        flex-flow: wrap;
+        align-items: center;
+        gap: $spacing-4;
+    }
+
     &[data-layout=group] {
         > .mx_DisambiguatedProfile {
             line-height: $font-20px;
@@ -286,8 +293,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
     }
 
     .mx_ReactionsRow {
-        margin: 0;
-        padding: 4px 64px;
+        margin: $spacing-4 64px;
     }
 }
 
@@ -981,7 +987,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
                 align-items: flex-end;
 
                 .mx_EventTile_line.mx_EventTile_mediaLine {
-                    margin: 0 var(--EventBubbleTile_line-margin-inline-end) 0 0; // align with normal messages
+                    margin: 0 var(--EventTile_bubble_line-margin-inline-end) 0 0; // align with normal messages
                 }
             }
         }