Emoji is squished when used in tables
Summary
When an emoji is used in a html table it may not render properly and be squished to below it's natural 20px width.
Steps to reproduce
- Go to a page with an
:emoji:
in a html table, any MR with a Danger comment will do.- also reproduced in this very ticket below (so meta)
- Reduce width of browser
- See emoji being being squished
I believe this is only an issue when the image fallback renderer is being used. I could reproduce it on Chromium and two QtWebEngine browsers, but not on Firefox. I can only reproduce it on my Linux machine, I've tried a Mac and Google Chrome is fine there.
Example Project
Any which use Danger. Other scenarios may arise where this happens too.
What is the current bug behavior?
<table>
<thead>
<tr>
<th width="5%"></th>
<th width="95%">
Heading 2
</th>
</tr>
</thead>
<tbody>
<tr>
<td>:warning:</td>
<td>Reducing width of the browser will squish the :warning: on the left.</td>
</tr>
</tbody>
</table>
This markdown is rendered as:
Heading 2 | |
---|---|
Reducing width of the browser will squish the |
What is the expected correct behavior?
The emoji should have it's normal width, even if used in this context.
Output of checks
This bug happens on GitLab.com
Possible fixes
(If you can, link to the line of code that might be responsible for the problem)
Using the web inspector to set the width: 20px
of gl-emoji
seem to fix the issue. This change would need to be done somewhere in emojis.scss I assume.
Original report on Danger issue tracker: https://github.com/danger/danger/issues/1243