From f97572f9118993709ce935d4848f4a0eeb24bf0a Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Thu, 14 Apr 2022 21:13:46 +0000
Subject: [PATCH] Align media and reactions row on thread panel (#8312)

* Align reactions row

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

* Nesting

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

* Include .mx_EventTile_mediaLine inside .mx_EventTile[data-layout=group]

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---
 res/css/views/right_panel/_TimelineCard.scss | 19 ++++++++++++-------
 res/css/views/rooms/_EventTile.scss          | 17 +++++++++--------
 2 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/res/css/views/right_panel/_TimelineCard.scss b/res/css/views/right_panel/_TimelineCard.scss
index 887fdd12fb..34debbb6fc 100644
--- a/res/css/views/right_panel/_TimelineCard.scss
+++ b/res/css/views/right_panel/_TimelineCard.scss
@@ -55,14 +55,19 @@ limitations under the License.
         margin-right: 0;
     }
 
-    .mx_EventTile:not([data-layout="bubble"]) .mx_EventTile_line {
-        padding-left: 36px;
-        padding-right: 36px;
-    }
+    .mx_EventTile:not([data-layout="bubble"]) {
+        .mx_EventTile_line {
+            padding-left: 36px;
+            padding-right: 36px;
+        }
 
-    .mx_EventTile:not([data-layout="bubble"]) .mx_ReactionsRow {
-        padding-left: 36px;
-        padding-right: 36px;
+        .mx_ReactionsRow {
+            padding: 0;
+
+            // See margin setting of ReactionsRow on _EventTile.scss
+            margin-left: 36px;
+            margin-right: 8px;
+        }
     }
 
     .mx_EventTile:not([data-layout="bubble"]) .mx_ThreadInfo {
diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index decd5a6f87..7d2fb2817d 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -1006,6 +1006,7 @@ $threadInfoLineHeight: calc(2 * $font-12px);
     }
 
     .mx_EventTile[data-layout=group] {
+        $spacing-start: 48px;
         width: 100%;
 
         .mx_EventTile_content,
@@ -1013,8 +1014,9 @@ $threadInfoLineHeight: calc(2 * $font-12px);
         .mx_RedactedBody,
         .mx_UnknownBody,
         .mx_MPollBody,
-        .mx_ReplyChain_wrapper {
-            margin-left: 48px;
+        .mx_ReplyChain_wrapper,
+        .mx_ReactionsRow {
+            margin-left: $spacing-start;
             margin-right: 8px;
 
             .mx_EventTile_content,
@@ -1025,11 +1027,6 @@ $threadInfoLineHeight: calc(2 * $font-12px);
             }
         }
 
-        .mx_ReactionsRow {
-            margin-left: 36px;
-            margin-right: 8px;
-        }
-
         .mx_MessageTimestamp {
             top: 2px !important;
             width: auto;
@@ -1053,10 +1050,14 @@ $threadInfoLineHeight: calc(2 * $font-12px);
                 }
             }
         }
+
+        .mx_EventTile_mediaLine {
+            padding-inline-start: $spacing-start;
+        }
     }
 
     .mx_EventTile_mediaLine {
-        padding-left: 36px !important;
+        padding-left: 36px;
         padding-right: 50px;
 
         .mx_MImageBody {