Make emote messages contents “dock” to nickname correctly

[CylonicRaider]

In the current styling, emotes are not only a bit too short, but their baselines are also below that one of the nick.

Current styling:

(Darkened for better visibility:)

[logan]

Unfortunately this isn't a universal fix, the vertical alignment is a coincidence depending on font size. It will take a deeper effort in the CSS to fix universally.

[CylonicRaider]

Will investigate.

[CylonicRaider]

@logan, the following styles are relevant:

• .nick, .text-rect { padding: 0 4px; font-size: .92em; } (main.less:559+) and .nick { padding-top: 1px; padding-bottom: 1px; } (main.less:570+; overrides the padding from the first declaration) for nicknames
• .messages .line-emote .message-emote { font-size: .92em; padding: 0 4px; } (main.less:1281 inherits from .text-rect) for emote contents

So, to make the emotes match the nickname height, we have to either adopt the expanded margin for emotes, or to discard the expanded margin on nicks. [But see also below.] Furthermore, the font size on both is — AFAICT; disregarding both of them changing by the same amount — inherited without modifications from body, as set in the very beginning of main.less.

Yours, Xyzzy

PS. On a second look, the “old” frontend achieved the “docking” by letting emotes have the same line height as nicks are tall (emotes: line-height: 19px; nicks: line-height: 19px; height: 19px); the new frontend does not set line heights for either (as it does not specify an explicit nick height), AFAICT. Thus, another alternative would be to determine an explicit height for nicks and emotes (or messages in general).

Hope that is enough of “a deeper effort in the CSS”. :smile:

[CylonicRaider]

@logan, any comments on my above investigations?