Emoji picker: Fix distorted custom Emojis

What does this MR do and why?

Emoji picker: Fix distorted custom Emojis

There is some random CSS bleeding into custom Emojis:

// Fix issue with notes & lists creating a bunch of bottom borders.
li.note {
  img { max-width: 100%; }

  ...
}

where the loosly defined img selector is causing the issue.

History

• Emoji group picker: Migrate button to GlButton (!134111 - merged) got merged which migrated the component to GlButton and introduced a visual regression
• This MR was created
• In the meantime we reverted the orignal MR with !139638 (merged)
• This MR contains the original commits from !134111 (merged) + the fix for the regression

Changes

• This MR has cherry-picked the commits from !134111 (merged) (94894f73362b5a407b3fabc4419bd890e82de0a5, 853e15a2cde675b96af9eb91c61f9b0c0485ae52, 28201dfb43240df44e9af79a501a56ca76d67ca1)
• Added the necessary changes to fix the regression

Screenshots or screen recordings

Before	After

How to set up and validate locally

1. echo "Feature.enable(:custom_emoji)" | gdk rails c
2. Create new Emoji: http://gdk.test:3000/groups/flightjs/-/custom_emoji/new
   name: party-parrot
   url: https://cultofthepartyparrot.com/parrots/hd/parrot.gif
3. Go to an issue: http://gdk.test:3000/flightjs/Flight/-/issues/44

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

• I have evaluated the MR acceptance checklist for this MR.

Related to #430244 (closed)
Closes #435048