From 8220b469fe6882fbbbe1c80ee7a5ad1b1557fb26 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Wed, 26 Jan 2022 11:09:03 +0000 Subject: [PATCH 1/2] Fix emojis getting cropped in irc & bubble layouts by anti-zalgo --- res/css/views/rooms/_EventBubbleTile.scss | 8 +++++++- res/css/views/rooms/_IRCLayout.scss | 3 ++- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss index d0cb8d24501..ebc8c73089d 100644 --- a/res/css/views/rooms/_EventBubbleTile.scss +++ b/res/css/views/rooms/_EventBubbleTile.scss @@ -279,9 +279,15 @@ limitations under the License. } &:not(.mx_EventTile_noBubble) .mx_EventTile_line:not(.mx_EventTile_mediaLine) { - padding: var(--gutterSize); + // make the top and bottom padding 1px smaller so that we can pad .mx_EventTile_content by 1px + // to avoid anti-zalgo cutting off our larger than text emojis. + padding: calc(var(--gutterSize) - 1px); padding-right: 60px; // space for the timestamp background: var(--backgroundColor); + + .mx_EventTile_content { + padding: 1px; + } } &.mx_EventTile_continuation[data-self=false] .mx_EventTile_line { diff --git a/res/css/views/rooms/_IRCLayout.scss b/res/css/views/rooms/_IRCLayout.scss index 204b11219d4..2afc3efce46 100644 --- a/res/css/views/rooms/_IRCLayout.scss +++ b/res/css/views/rooms/_IRCLayout.scss @@ -25,7 +25,6 @@ $irc-line-height: $font-18px; line-height: $irc-line-height !important; .mx_EventTile { - // timestamps are links which shouldn't be underlined > a { text-decoration: none; @@ -111,6 +110,8 @@ $irc-line-height: $font-18px; .mx_TextualEvent, .mx_MTextBody { display: inline-block; + // add a 1px padding top and bottom because our larger emoji font otherwise gets cropped by anti-zalgo + padding: 1px 0; } } From 52dad7e50ff8822cfe360dd7d42671292863df57 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 27 Jan 2022 09:39:05 +0000 Subject: [PATCH 2/2] Update res/css/views/rooms/_EventBubbleTile.scss Co-authored-by: J. Ryan Stinnett --- res/css/views/rooms/_EventBubbleTile.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss index ebc8c73089d..6b0f11ea231 100644 --- a/res/css/views/rooms/_EventBubbleTile.scss +++ b/res/css/views/rooms/_EventBubbleTile.scss @@ -279,7 +279,7 @@ limitations under the License. } &:not(.mx_EventTile_noBubble) .mx_EventTile_line:not(.mx_EventTile_mediaLine) { - // make the top and bottom padding 1px smaller so that we can pad .mx_EventTile_content by 1px + // make the top and bottom padding 1px smaller so that we can pad .mx_EventTile_content by 1px // to avoid anti-zalgo cutting off our larger than text emojis. padding: calc(var(--gutterSize) - 1px); padding-right: 60px; // space for the timestamp