Skip to content

Emoji is cutoff when on last line

Summary

It appears that when an emoji is on the last line (or the only line) of a comment on a commit, the bottom few pixels of emoji is cutoff. I have only noticed this on Windows 10 (not reproducible on Windows 7), so my suspicion is it appears when using the "Segoe UI Emoji" font.

Steps to reproduce

On Windows 10 or Ubuntu:

  1. Add a single line comment with an emoji to a commit.
  2. Notice that the bottom few pixels of the emoji are not visible.

Example Project

krische/test@1734f75e (comment 108832545)

What is the current bug behavior?

The bottom few pixels are cutoff.

2018-10-15_7-52-44

  • Windows 10: image
  • Ubuntu (19.10): image

What is the expected correct behavior?

The full emoji should be visible

Solution Proposal

Add padding-bottom: .5em to the .md>:last-child { margin-bottom: 0; } class. @psimyn may be working on a better CSS solution.

Screen_Shot_2020-10-12_at_4.23.12_PM

Possible fixes

  • Preferred - Remove some unnecessary overflow: hiddens that are causing the cut-off. Avoids the extra space at the bottom, and a bit less finicky than line height estimates
  • Adjust line height of gl-emoji - I noticed that if I removed the setting of the line-height CSS attribute in emojis.scss, the full emoji would be visible. However, I'm not sure how that would affect emojis on other platforms, but it is a possible solution.
  • Remove .md>:last-child { margin-bottom: 0; } - This removes resetting the bottom margin to 0 on the last p element in the markdown editor. This may provide a more consistent spacing across comments -- especially when the last line does not include an emoji.
Edited by Holly Reynolds