Update award emoji button native emoji alignment

What does this MR do?

• Better align native unicode emojis in award block buttons

mac OS Chrome

Before

After

---

mac OS Safari

Before

After

---

Windows 10 Chrome

Before

After

Are there points in the code the reviewer needs to double check?

Not quite vertically aligned perfectly but isn't really possible because the bounds are different between OS's and how the emoji is placed on the baseline. Windows likes to put them lower on the baseline and can even escapes the bounds (here is an extreme example without button padding just to show that off)

Why was this MR needed?

Award emoji buttons were squashed together horizontally (compared to before) and vertical alignment could use some slight touchup.

Does this MR meet the acceptance criteria?

• Tests
  • All builds are passing
• Conform by the style guides
• Branch has no merge conflicts with master (if it does - rebase it please)
• Squashed related commits together

What are the relevant issue numbers?

Closes #29228 (closed)

@annabeldunstone can you review?

assigned to @annabeldunstone

Looks good to me:

Before	After

I had similar issues vertically aligning Segoe UI when we switched to system fonts. Thanks @MadLittleMods; looks good to me!

approved this merge request

merged

mentioned in commit ce5d1b6f

Picked into 9-0-stable, will go into 9.0.0-rc4

removed ~149423 label

mentioned in commit 1460a736

added emoji label

marked the task All builds are passing as completed

For future reference, if we want to improve things @psimyn shared a good article, Deep dive CSS: font metrics, line-height and vertical-align by Vincent De Oliveira (aka iamvdo)