Set line-height: 1 to RedactedBody inside GenericEventListSummary for IRC/modern layout (#8529)

* Move line-height of .mx_EventTile_line from _GroupLayout.scss to _EventTile.scss

Specifying mx_EventTile_line's line-height in mx_GroupLayout is too strong for mx_GenericEventListSummary.

- Set line-height:1 to mx_RedactedBody inside mx_GenericEventListSummary on IRC/modern layout

Signed-off-by: Suguru Hirahara <[email protected]>

* Use a variable to remove the comment

Signed-off-by: Suguru Hirahara <[email protected]>

* Readability

Signed-off-by: Suguru Hirahara <[email protected]>

Author: luixxiul

res/css/views/rooms/_EventTile.scss

@@ -50,6 +50,12 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
     .mx_EventTile_receiptSending::before {
         mask-image: url('$(res)/img/element-icons/circle-sending.svg');
     }
+
+    &[data-layout=group] {
+        .mx_EventTile_line {
+            line-height: var(--GroupLayout-EventTile-line-height);
+        }
+    }
 }
 
 .mx_EventTile:not([data-layout=bubble]) {
@@ -263,8 +269,15 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
     }
 }
 
-.mx_GenericEventListSummary:not([data-layout=bubble]) .mx_EventTile_line {
-    padding-left: $left-gutter;
+.mx_GenericEventListSummary:not([data-layout=bubble]) {
+    .mx_EventTile_line {
+        padding-left: $left-gutter;
+        line-height: normal;
+
+        .mx_RedactedBody {
+            line-height: 1; // remove spacing between lines
+        }
+    }
 }
 
 .mx_EventTile:not([data-layout=bubble]).mx_EventTile_info .mx_EventTile_line,

res/css/views/rooms/_GroupLayout.scss

@@ -18,6 +18,8 @@ limitations under the License.
 $left-gutter: 64px;
 
 .mx_GroupLayout {
+    --GroupLayout-EventTile-line-height: $font-22px;
+
     .mx_EventTile {
         > .mx_DisambiguatedProfile {
             line-height: $font-20px;
@@ -33,10 +35,14 @@ $left-gutter: 64px;
             position: absolute; // for modern layout
         }
 
-        .mx_EventTile_line, .mx_EventTile_reply {
+        .mx_EventTile_line,
+        .mx_EventTile_reply {
             padding-top: 1px;
             padding-bottom: 3px;
-            line-height: $font-22px;
+        }
+
+        .mx_EventTile_reply {
+            line-height: var(--GroupLayout-EventTile-line-height);
         }
     }
 }
@@ -47,7 +53,8 @@ $left-gutter: 64px;
     .mx_EventTile {
         padding-top: 4px;
 
-        .mx_EventTile_line, .mx_EventTile_reply {
+        .mx_EventTile_line,
+        .mx_EventTile_reply {
             padding-top: 0;
             padding-bottom: 0;
         }
@@ -56,9 +63,12 @@ $left-gutter: 64px;
             // same as the padding for non-compact .mx_EventTile.mx_EventTile_info
             padding-top: 0px;
             font-size: $font-13px;
-            .mx_EventTile_line, .mx_EventTile_reply {
+
+            .mx_EventTile_line,
+            .mx_EventTile_reply {
                 line-height: $font-20px;
             }
+
             .mx_EventTile_avatar {
                 top: 4px;
             }
@@ -71,18 +81,23 @@ $left-gutter: 64px;
         &.mx_EventTile_emote {
             // add a bit more space for emotes so that avatars don't collide
             padding-top: 8px;
+
             .mx_EventTile_avatar {
                 top: 2px;
             }
-            .mx_EventTile_line, .mx_EventTile_reply {
+
+            .mx_EventTile_line,
+            .mx_EventTile_reply {
                 padding-top: 0px;
                 padding-bottom: 1px;
             }
         }
 
         &.mx_EventTile_emote.mx_EventTile_continuation {
             padding-top: 0;
-            .mx_EventTile_line, .mx_EventTile_reply {
+
+            .mx_EventTile_line,
+            .mx_EventTile_reply {
                 padding-top: 0px;
                 padding-bottom: 0px;
             }