Skip to content

Fix custom emoji display

What does this MR do and why?

Adjusts the style of gl-emoji so that the images used for custom emojis do not cause layout problems:

  • Ensure that custom emoji image is scaled to fix in its container so that portrait- or landscape-oriented images are not distorted
  • Ensure that custom emoji images are the correct size so that they do not cause line height problems
  • Ensure that custom emoji images are displayed with the proper vertical alignment

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

Before After
image image

How to set up and validate locally

  1. Check out this branch locally
  2. In the GDK, make sure you have some custom emojis added in a group (you can add them at http://gdk.test:3000/groups/GROUP_NAME_HERE/-/custom_emoji/)
    1. Make sure you add some custom emojis that are not square as well. Try to add both portrait-oriented and landscape-oriented custom emoji images in addition to square ones.
  3. Inside that group somewhere, edit markdown (in an issue description, MR description, or comment) and use the custom emojis you just added inline in paragraphs, in ordered lists, in unordered lists, and in checklists.
  4. You will see that the custom emojis are displayed with their correct aspect ratio and they do not affect the layout of their parent.
  5. Use the custom emojis you added to react to something (an issue, MR or comment)
  6. You will see that the custom emojis display properly and with the correct aspect ratio.

Related to #472061 (closed), #452231 (closed)

Edited by Chad Lavimoniere

Merge request reports

Loading