Set line-height for ReplyTile on IRC, modern, and bubble layout

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
matrix-org · Jun 29, 2022 · d3146ab · d3146ab
1 parent 4486509
commit d3146ab
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;