Login page emoji rendering slightly out of place
Summary
Emoji on login page renders slightly out of place.
Steps to reproduce
As an administrator, go to appearance settings and add some text with emoji to the Description field.
*Happy codding!!* :nerd:
Save and logout. Go to the login page and check the text you just entered.
Expected behavior
The emoji should be vertically aligned with the text lines, just like everywhere else emoji is supported on GitLab.
Actual behavior
The emoji is 30 pixels above the text lines.
Relevant logs and/or screenshots
Possible fixes
There is a CSS rule adding a 30px margin-bottom to images on login page brand holder (emoji included). This makes emoji render out of place (above the lines it is inserted into).
.login-page .brand-holder img {
max-width: 100%;
margin-bottom: 30px;
}
As all emoji has .emoji
class, a quick solution could be to add a new rule just for .emoji
:
.login-page .brand-holder img {
max-width: 100%;
margin-bottom: 30px;
}
.login-page .brand-holder img.emoji {
margin-bottom: 0px;
}