Web-bugs: steamcommunity.com - Icons are cramped into the upper portion of emote and attach button

[WhAtEvErYoUmEaN]

URL: https://steamcommunity.com/chat

Browser / Version: Firefox 71.0
Operating System: Windows 10
Tested Another Browser: Yes

Problem type: Design is broken
Description: Icons are cramped into the upper portion of emote and attach button
Steps to Reproduce:
See Screenshot

Browser Configuration

• None

_From webcompat.com with ❤️_

[WhAtEvErYoUmEaN]

Okay, apparently "Design is broken" is a more severe classification than i thought.
It's a minor issue.

[softvision-sergiulogigan]

Thanks for the report!
I'm able to reproduce the issue.

Tested with:
Browser / Version: Firefox Nightly 72.0a1 (2019-11-26)
Operating System: Windows 10 Pro

Moving to Needsdiagnosis.

[ksy36]

Adding the following to buttons containing svg icons fixes the issue:

.chatentry_chatSubmitButton_3VRfL.chatentry_EmbedButton_1vvRh, .chatentry_chatSubmitButton_3VRfL.chatentry_EmoticonPickerButton_3fgX0 {
      align-items: center;
}

Wonder why Chrome's behavior is different here though. Maybe @dholbert has some thoughts? I've created a reduced test case https://codepen.io/ksy36/pen/mddNEOb

[dholbert]

The behavior difference here is a Chrome bug, which I've filed as https://bugs.chromium.org/p/chromium/issues/detail?id=1029424

Your suggested fix (align-items:center on the button) is the right fix, and we should suggest that to someone at Steam.

[ksy36]

Thanks!

[softvision-oana-arbuzov]

The issue has been fixed.

Tested with:
Browser / Version: Firefox Nightly 81.0a1 (2020-08-17)
Operating System: Windows 10 Pro