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:
- Add a single line comment with an emoji to a commit.
- 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.
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.
Possible fixes
-
Preferred - Remove some unnecessary
overflow: hidden
s 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 theline-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 to0
on the lastp
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