Custom emojis all have the same fixed size

[paulchen]

Description:

All custom emojis have a fixed width of 2.75rem and a fixed height of 2.75rem which is set via CSS.

Steps to reproduce:

1. Add a custom emoji which has a different size than 2.75rem x 2.75rem.
2. Write a message containing this emoji.

Expected behavior:

The custom emoji is not resized:

Actual behavior:

The custom emoji is resized to 2.75rem x 2.75rem:

Server Setup Information:

• Version of Rocket.Chat Server: 5.1.4
• Operating System: Debian GNU/Linux
• Deployment Method: Docker
• Number of Running Instances: 1
• DB Replicaset Oplog: ?
• NodeJS Version: 14.19.3
• MongoDB Version: 5.0.12

Client Setup Information

• Desktop App or Browser Version: Chromium 106.0.5249.61 (Offizieller Build) Arch Linux (64-Bit), Firefox 105.0.1 (64-Bit)
• Operating System: Arch Linux

Additional context

This problem was already reported in https://github.com/RocketChat/Rocket.Chat/issues/26547, but in my case I cannot use the solution mentioned there as my custom emojis have different sizes. Of course, I could make use of the fact that every custom emoji comes with its own CSS class and create a separate CSS definition for each emoji, but in my opinion this is a quite dirty solution.

I think this could be fixed by adding the attributes height and width to the span element of the emoji (this is how i created the screenshot in the section "Actual behaviour" above). During upload of a custom emoji, Rocket.Chat could save height and width of the emoji and retrieve these values when displaying it.