Fix emojis getting cropped in irc & bubble layouts by anti-zalgo (#7637)

Co-authored-by: J. Ryan Stinnett <jryans@gmail.com>
matrix-org · Jan 27, 2022 · 20819df · 20819df
1 parent 3ff4c68
commit 20819df
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git 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
@@ -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;
             }
         }