"Face With Open Eyes And Hand Over Mouth" overflows the emoji picker

[robintown]

Steps to reproduce

1. Open the emoji picker
2. Hover over "Face With Open Eyes And Hand Over Mouth"

Outcome

What did you expect?

The text should be ellipsized, or something

What happened instead?

Operating system

NixOS unstable

Browser information

Firefox 99.0.1

URL for webapp

develop.element.io

Application version

Element version: cdf95ab-react-c1579f765a8a-js-62d77231afd4 Olm version: 3.2.8

Homeserver

Synapse 1.58.0

Will you send logs?

No

[yaya-usman]

@robintown how about this state? but i had to decrease the font-size a bit.

[robintown]

Rather than decreasing the font size (which would require design review), we should probably just remove the possibility of the text overflowing the container by giving it an appropriate overflow property. We may also want to limit the description to 1 line in CSS.

[yaya-usman]

I decreased the fontsize a bit because no overflow property can fit the text well except the scroll property which is not ideal in my opinion. Also concerning the description text, it's too large or long to fit into one line, it's probably gonna break into two line. But if you want it to be ellipsized, i can do that but the user will not be able to read the full text as shown in the image below

[robintown]

That's probably fine, the shortcode for instance will become much shorter once our emoji sources actually have proper shortcode coverage for Emoji 14.

[SAGARGAUD01]

The issue is solved or not ?
assign me if issue is not solved yet.

[VaibhavAPatil]

I am interested in this Issue. Can I do Pull Request or you can assign this issue to Me.

[robintown]

Thank you for your interest, but this issue is already resolved.