"Face With Open Eyes And Hand Over Mouth" overflows the emoji picker
robintown opened this issue · 7 comments
Steps to reproduce
- Open the emoji picker
- 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
@robintown how about this state? but i had to decrease the font-size a bit.
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.
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
That's probably fine, the shortcode for instance will become much shorter once our emoji sources actually have proper shortcode coverage for Emoji 14.
The issue is solved or not ?
assign me if issue is not solved yet.
I am interested in this Issue. Can I do Pull Request or you can assign this issue to Me.
Thank you for your interest, but this issue is already resolved.