The login button can have text overflowing out of the box in some locales and platforms

[Porkepix]

Description

The login button can have text overflowing out of the box in some locales and platforms

Steps to reproduce

• Go on https://riot.im/develop/#/home or https://riot.im/app/#/home without a connected account with French as requested locale and on a Mac
• You can see the text go outside of the box (see joined screenshot)

Describe how what happens differs from what you expected.

The box should be sized to contain the text.

Version information

• Platform: web

For the web app:

• Browser: Firefox stable and nightly, Chrome.
• OS: macOS
• URL: riot.im/develop / riot.im/app

Additional informations:

Problem visible on both Firefox and Chrome on macOS, but not on Linux nor Windows.
It seems to be related to the font and its style (Linux may have the requested font missing too).
Text seems to be bold on macOS compared to other platforms.
I think it's important to check other locales for both the sign in and log in buttons as many locales can have longer texts than French.

[lampholder]

Ideally these buttons would:

• expand to fit the text content
• wrap over two lines if both buttons can't fit on the same line

[turt2live]

Duplicate of #4713

[t3chguy]

Thanks @turt2live
Closed other in favour of this one as it has @lampholder's master plan on it

[lukebarnard1]

We might be able to get away with just using CSS, similarly to #4776