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>
matrix-org · Apr 14, 2022 · f97572f · f97572f
1 parent 8eaae6b
commit f97572f
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 15 deletions.
diff --git 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
@@ -1006,15 +1006,17 @@ $threadInfoLineHeight: calc(2 * $font-12px);
     }
 
     .mx_EventTile[data-layout=group] {
+        $spacing-start: 48px;
         width: 100%;
 
         .mx_EventTile_content,
         .mx_HiddenBody,
         .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 {