From d3146ab49756a32b43f48d8ec3665eb74c955a01 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Mon, 27 Jun 2022 18:05:52 +0900
Subject: [PATCH 1/7] Set line-height for ReplyTile on IRC, modern, and bubble
 layout

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---
 res/css/views/rooms/_EventBubbleTile.scss | 7 ++++++-
 res/css/views/rooms/_EventTile.scss       | 8 +++++++-
 res/css/views/rooms/_IRCLayout.scss       | 4 ++++
 res/css/views/rooms/_ReplyTile.scss       | 2 +-
 4 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss
index 285f16788bb..005696c0d89 100644
--- a/res/css/views/rooms/_EventBubbleTile.scss
+++ b/res/css/views/rooms/_EventBubbleTile.scss
@@ -55,6 +55,7 @@ limitations under the License.
 .mx_EventTile[data-layout=bubble] {
     --EventTile_bubble-margin-inline-start: 49px;
     --EventTile_bubble-margin-inline-end: 60px;
+    --EventTile_bubble_line-line-height: $font-18px; // fixed line height to prevent emoji from being taller than text
     --EventTile_bubble_line-margin-inline-start: -9px;
     --EventTile_bubble_line-margin-inline-end: -12px;
     --EventTile_bubble_gap-inline: 5px;
@@ -121,7 +122,7 @@ limitations under the License.
 
         width: fit-content;
         max-width: var(--EventBubbleTile_line-max-width); // Align message bubble and displayName
-        line-height: $font-18px; // fixed line height to prevent emoji from being taller than text
+        line-height: var(--EventTile_bubble_line-line-height);
     }
 
     // other users profile on bubble layout
@@ -153,6 +154,10 @@ limitations under the License.
         font-size: $font-15px;
     }
 
+    .mx_ReplyTile .mx_EventTile_content {
+        line-height: var(--EventTile_bubble_line-line-height);
+    }
+
     .mx_MessageActionBar {
         top: -28px;
         z-index: 9; // above the avatar
diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index facf9046162..d4e1189962b 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -99,6 +99,8 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
     }
 
     &[data-layout=group] {
+        --EventTile_group_line-line-height: $font-22px;
+
         > .mx_DisambiguatedProfile {
             line-height: $font-20px;
             margin-left: $left-gutter;
@@ -124,7 +126,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
             padding-top: 1px;
             padding-bottom: 3px;
             padding-left: $left-gutter;
-            line-height: $font-22px;
+            line-height: var(--EventTile_group_line-line-height);
         }
 
         .mx_EventTile_e2eIcon {
@@ -135,6 +137,10 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
             margin-right: 10px;
         }
 
+        .mx_ReplyTile .mx_EventTile_content {
+            line-height: var(--EventTile_group_line-line-height);
+        }
+
         .mx_ThreadSummary,
         .mx_ThreadSummaryIcon {
             margin-left: $left-gutter;
diff --git a/res/css/views/rooms/_IRCLayout.scss b/res/css/views/rooms/_IRCLayout.scss
index 183fe7a1fb3..c61e0c0e803 100644
--- a/res/css/views/rooms/_IRCLayout.scss
+++ b/res/css/views/rooms/_IRCLayout.scss
@@ -105,6 +105,10 @@ $irc-line-height: $font-18px;
             order: 4;
         }
 
+        .mx_ReplyTile .mx_EventTile_content {
+            line-height: $irc-line-height;
+        }
+
         .mx_EditMessageComposer_buttons {
             position: relative;
         }
diff --git a/res/css/views/rooms/_ReplyTile.scss b/res/css/views/rooms/_ReplyTile.scss
index fe8e5bce489..174eb3b59f1 100644
--- a/res/css/views/rooms/_ReplyTile.scss
+++ b/res/css/views/rooms/_ReplyTile.scss
@@ -60,7 +60,7 @@ limitations under the License.
     // We do reply size limiting with CSS to avoid duplicating the TextualBody component.
     .mx_EventTile_content {
         $reply-lines: 2;
-        $line-height: $font-22px;
+        $line-height: $font-22px; // Same as var(--EventTile_group_line-line-height)
 
         text-overflow: ellipsis;
         display: -webkit-box;

From 0f832e19e8c6a42b885f38adb40caeb08361d0e7 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Wed, 29 Jun 2022 19:40:18 +0900
Subject: [PATCH 2/7] Move line-height style block to _EventTile.scss

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---
 res/css/views/rooms/_EventTile.scss |  6 ++++++
 res/css/views/rooms/_IRCLayout.scss | 14 +++++---------
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index d4e1189962b..39a33a5d20f 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -98,6 +98,12 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
         }
     }
 
+    &[data-layout=irc] {
+        .mx_ReplyTile .mx_EventTile_content {
+            line-height: var(--irc-line-height);
+        }
+    }
+
     &[data-layout=group] {
         --EventTile_group_line-line-height: $font-22px;
 
diff --git a/res/css/views/rooms/_IRCLayout.scss b/res/css/views/rooms/_IRCLayout.scss
index c61e0c0e803..874a53a2694 100644
--- a/res/css/views/rooms/_IRCLayout.scss
+++ b/res/css/views/rooms/_IRCLayout.scss
@@ -16,12 +16,12 @@ limitations under the License.
 
 $icon-width: 14px;
 $right-padding: 5px;
-$irc-line-height: $font-18px;
 
 .mx_IRCLayout {
     --name-width: 70px;
+    --irc-line-height: $font-18px;
 
-    line-height: $irc-line-height !important;
+    line-height: var(--irc-line-height) !important;
 
     .mx_EventTile {
         // timestamps are links which shouldn't be underlined
@@ -44,7 +44,7 @@ $irc-line-height: $font-18px;
             flex-shrink: 0;
 
             .mx_ReadReceiptGroup {
-                top: -0.3rem; // ($irc-line-height - avatar height) / 2
+                top: -0.3rem; // (var(--irc-line-height) - avatar height) / 2
             }
         }
 
@@ -62,7 +62,7 @@ $irc-line-height: $font-18px;
             order: 1;
             position: relative;
             flex-shrink: 0;
-            height: $irc-line-height;
+            height: var(--irc-line-height);
             display: flex;
             align-items: center;
 
@@ -105,10 +105,6 @@ $irc-line-height: $font-18px;
             order: 4;
         }
 
-        .mx_ReplyTile .mx_EventTile_content {
-            line-height: $irc-line-height;
-        }
-
         .mx_EditMessageComposer_buttons {
             position: relative;
         }
@@ -139,7 +135,7 @@ $irc-line-height: $font-18px;
         }
 
         .mx_TextualEvent {
-            line-height: $irc-line-height;
+            line-height: var(--irc-line-height);
         }
     }
 

From 523a60b17afd849556296b43e60c6e02768e8d8f Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Wed, 29 Jun 2022 19:42:00 +0900
Subject: [PATCH 3/7] Move line-height style block to _EventTile.scss

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---
 res/css/views/rooms/_EventBubbleTile.scss | 4 ----
 res/css/views/rooms/_EventTile.scss       | 6 ++++++
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss
index 005696c0d89..c33016d7b38 100644
--- a/res/css/views/rooms/_EventBubbleTile.scss
+++ b/res/css/views/rooms/_EventBubbleTile.scss
@@ -154,10 +154,6 @@ limitations under the License.
         font-size: $font-15px;
     }
 
-    .mx_ReplyTile .mx_EventTile_content {
-        line-height: var(--EventTile_bubble_line-line-height);
-    }
-
     .mx_MessageActionBar {
         top: -28px;
         z-index: 9; // above the avatar
diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index 39a33a5d20f..81364021fa1 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -156,6 +156,12 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
             margin: $spacing-4 64px;
         }
     }
+
+    &[data-layout=bubble] {
+        .mx_ReplyTile .mx_EventTile_content {
+            line-height: var(--EventTile_bubble_line-line-height);
+        }
+    }
 }
 
 .mx_EventTile:not([data-layout=bubble]) {

From c92899e155891460b1dc9c06252441f9db1f6c30 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Thu, 30 Jun 2022 02:27:28 +0900
Subject: [PATCH 4/7] Revert "Move line-height style block to _EventTile.scss"

This reverts commit 523a60b17afd849556296b43e60c6e02768e8d8f.

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---
 res/css/views/rooms/_EventBubbleTile.scss | 4 ++++
 res/css/views/rooms/_EventTile.scss       | 6 ------
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss
index c33016d7b38..005696c0d89 100644
--- a/res/css/views/rooms/_EventBubbleTile.scss
+++ b/res/css/views/rooms/_EventBubbleTile.scss
@@ -154,6 +154,10 @@ limitations under the License.
         font-size: $font-15px;
     }
 
+    .mx_ReplyTile .mx_EventTile_content {
+        line-height: var(--EventTile_bubble_line-line-height);
+    }
+
     .mx_MessageActionBar {
         top: -28px;
         z-index: 9; // above the avatar
diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index 81364021fa1..39a33a5d20f 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -156,12 +156,6 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
             margin: $spacing-4 64px;
         }
     }
-
-    &[data-layout=bubble] {
-        .mx_ReplyTile .mx_EventTile_content {
-            line-height: var(--EventTile_bubble_line-line-height);
-        }
-    }
 }
 
 .mx_EventTile:not([data-layout=bubble]) {

From a9b110c4061982f6cb1bb833a258698879908e10 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Thu, 30 Jun 2022 02:27:31 +0900
Subject: [PATCH 5/7] Revert "Move line-height style block to _EventTile.scss"

This reverts commit 0f832e19e8c6a42b885f38adb40caeb08361d0e7.

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---
 res/css/views/rooms/_EventTile.scss |  6 ------
 res/css/views/rooms/_IRCLayout.scss | 14 +++++++++-----
 2 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index 39a33a5d20f..d4e1189962b 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -98,12 +98,6 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
         }
     }
 
-    &[data-layout=irc] {
-        .mx_ReplyTile .mx_EventTile_content {
-            line-height: var(--irc-line-height);
-        }
-    }
-
     &[data-layout=group] {
         --EventTile_group_line-line-height: $font-22px;
 
diff --git a/res/css/views/rooms/_IRCLayout.scss b/res/css/views/rooms/_IRCLayout.scss
index 874a53a2694..c61e0c0e803 100644
--- a/res/css/views/rooms/_IRCLayout.scss
+++ b/res/css/views/rooms/_IRCLayout.scss
@@ -16,12 +16,12 @@ limitations under the License.
 
 $icon-width: 14px;
 $right-padding: 5px;
+$irc-line-height: $font-18px;
 
 .mx_IRCLayout {
     --name-width: 70px;
-    --irc-line-height: $font-18px;
 
-    line-height: var(--irc-line-height) !important;
+    line-height: $irc-line-height !important;
 
     .mx_EventTile {
         // timestamps are links which shouldn't be underlined
@@ -44,7 +44,7 @@ $right-padding: 5px;
             flex-shrink: 0;
 
             .mx_ReadReceiptGroup {
-                top: -0.3rem; // (var(--irc-line-height) - avatar height) / 2
+                top: -0.3rem; // ($irc-line-height - avatar height) / 2
             }
         }
 
@@ -62,7 +62,7 @@ $right-padding: 5px;
             order: 1;
             position: relative;
             flex-shrink: 0;
-            height: var(--irc-line-height);
+            height: $irc-line-height;
             display: flex;
             align-items: center;
 
@@ -105,6 +105,10 @@ $right-padding: 5px;
             order: 4;
         }
 
+        .mx_ReplyTile .mx_EventTile_content {
+            line-height: $irc-line-height;
+        }
+
         .mx_EditMessageComposer_buttons {
             position: relative;
         }
@@ -135,7 +139,7 @@ $right-padding: 5px;
         }
 
         .mx_TextualEvent {
-            line-height: var(--irc-line-height);
+            line-height: $irc-line-height;
         }
     }
 

From 014bb44b98886e96ff947d399602158fdbf3e704 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Thu, 30 Jun 2022 02:28:24 +0900
Subject: [PATCH 6/7] Revert "Set line-height for ReplyTile on IRC, modern, and
 bubble layout"

This reverts commit d3146ab49756a32b43f48d8ec3665eb74c955a01.

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---
 res/css/views/rooms/_EventBubbleTile.scss | 7 +------
 res/css/views/rooms/_EventTile.scss       | 8 +-------
 res/css/views/rooms/_IRCLayout.scss       | 4 ----
 res/css/views/rooms/_ReplyTile.scss       | 2 +-
 4 files changed, 3 insertions(+), 18 deletions(-)

diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss
index 005696c0d89..285f16788bb 100644
--- a/res/css/views/rooms/_EventBubbleTile.scss
+++ b/res/css/views/rooms/_EventBubbleTile.scss
@@ -55,7 +55,6 @@ limitations under the License.
 .mx_EventTile[data-layout=bubble] {
     --EventTile_bubble-margin-inline-start: 49px;
     --EventTile_bubble-margin-inline-end: 60px;
-    --EventTile_bubble_line-line-height: $font-18px; // fixed line height to prevent emoji from being taller than text
     --EventTile_bubble_line-margin-inline-start: -9px;
     --EventTile_bubble_line-margin-inline-end: -12px;
     --EventTile_bubble_gap-inline: 5px;
@@ -122,7 +121,7 @@ limitations under the License.
 
         width: fit-content;
         max-width: var(--EventBubbleTile_line-max-width); // Align message bubble and displayName
-        line-height: var(--EventTile_bubble_line-line-height);
+        line-height: $font-18px; // fixed line height to prevent emoji from being taller than text
     }
 
     // other users profile on bubble layout
@@ -154,10 +153,6 @@ limitations under the License.
         font-size: $font-15px;
     }
 
-    .mx_ReplyTile .mx_EventTile_content {
-        line-height: var(--EventTile_bubble_line-line-height);
-    }
-
     .mx_MessageActionBar {
         top: -28px;
         z-index: 9; // above the avatar
diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index d4e1189962b..facf9046162 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -99,8 +99,6 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
     }
 
     &[data-layout=group] {
-        --EventTile_group_line-line-height: $font-22px;
-
         > .mx_DisambiguatedProfile {
             line-height: $font-20px;
             margin-left: $left-gutter;
@@ -126,7 +124,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
             padding-top: 1px;
             padding-bottom: 3px;
             padding-left: $left-gutter;
-            line-height: var(--EventTile_group_line-line-height);
+            line-height: $font-22px;
         }
 
         .mx_EventTile_e2eIcon {
@@ -137,10 +135,6 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
             margin-right: 10px;
         }
 
-        .mx_ReplyTile .mx_EventTile_content {
-            line-height: var(--EventTile_group_line-line-height);
-        }
-
         .mx_ThreadSummary,
         .mx_ThreadSummaryIcon {
             margin-left: $left-gutter;
diff --git a/res/css/views/rooms/_IRCLayout.scss b/res/css/views/rooms/_IRCLayout.scss
index c61e0c0e803..183fe7a1fb3 100644
--- a/res/css/views/rooms/_IRCLayout.scss
+++ b/res/css/views/rooms/_IRCLayout.scss
@@ -105,10 +105,6 @@ $irc-line-height: $font-18px;
             order: 4;
         }
 
-        .mx_ReplyTile .mx_EventTile_content {
-            line-height: $irc-line-height;
-        }
-
         .mx_EditMessageComposer_buttons {
             position: relative;
         }
diff --git a/res/css/views/rooms/_ReplyTile.scss b/res/css/views/rooms/_ReplyTile.scss
index 174eb3b59f1..fe8e5bce489 100644
--- a/res/css/views/rooms/_ReplyTile.scss
+++ b/res/css/views/rooms/_ReplyTile.scss
@@ -60,7 +60,7 @@ limitations under the License.
     // We do reply size limiting with CSS to avoid duplicating the TextualBody component.
     .mx_EventTile_content {
         $reply-lines: 2;
-        $line-height: $font-22px; // Same as var(--EventTile_group_line-line-height)
+        $line-height: $font-22px;
 
         text-overflow: ellipsis;
         display: -webkit-box;

From 9f0c89b37331dd3acdf18eead46eaa7a67010352 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Thu, 30 Jun 2022 02:34:26 +0900
Subject: [PATCH 7/7] Remove line-height declarations to let inherited values
 used

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---
 res/css/views/rooms/_EventTile.scss | 4 +++-
 res/css/views/rooms/_ReplyTile.scss | 5 +----
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index facf9046162..90c5809af8c 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -99,6 +99,8 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
     }
 
     &[data-layout=group] {
+        --EventTile_group_line-line-height: $font-22px;
+
         > .mx_DisambiguatedProfile {
             line-height: $font-20px;
             margin-left: $left-gutter;
@@ -124,7 +126,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
             padding-top: 1px;
             padding-bottom: 3px;
             padding-left: $left-gutter;
-            line-height: $font-22px;
+            line-height: var(--EventTile_group_line-line-height);
         }
 
         .mx_EventTile_e2eIcon {
diff --git a/res/css/views/rooms/_ReplyTile.scss b/res/css/views/rooms/_ReplyTile.scss
index fe8e5bce489..3c782658130 100644
--- a/res/css/views/rooms/_ReplyTile.scss
+++ b/res/css/views/rooms/_ReplyTile.scss
@@ -18,7 +18,6 @@ limitations under the License.
     position: relative;
     padding: 2px 0;
     font-size: $font-14px;
-    line-height: $font-16px;
 
     &.mx_ReplyTile_audio .mx_MFileBody_info_icon::before {
         mask-image: url("$(res)/img/element-icons/speaker.svg");
@@ -60,16 +59,14 @@ limitations under the License.
     // We do reply size limiting with CSS to avoid duplicating the TextualBody component.
     .mx_EventTile_content {
         $reply-lines: 2;
-        $line-height: $font-22px;
 
         text-overflow: ellipsis;
         display: -webkit-box;
         -webkit-box-orient: vertical;
         -webkit-line-clamp: $reply-lines;
-        line-height: $line-height;
 
         .mx_EventTile_body.mx_EventTile_bigEmoji {
-            line-height: $line-height !important;
+            line-height: $font-22px !important; // Same as var(--EventTile_group_line-line-height)
             font-size: $font-14px !important; // Override the big emoji override
         }