Login: Set the social links container to expand with the text

[dlind1]

Part of I18N-221

Proposed Changes

• Set the social links container on login page to always fit the text content and not shrink below that.

Before	After

Why are these changes being made?

• On many languages the translations for "Email me a login link" and "Log in via Jetpack app" are considerably longer than in English, which causes the texts to overflow the buttons.

Testing Instructions

On calypso.localhost use the following links to test in Turkish (you can check other languages by changing the locale slug in the URL):
WordPress.com
Crowdsignal
Jetpack Cloud
Woo - on Woo the container width is set to 327px, so a simple solution would be to source shorter translations for a single string in French, Italian and Brazilian Portuguese.
Blaze Pro
Akismet
A4A - Can't link due to GitHub OSS scan rules: go to the A4A site and click login. Edit the URL and change the host to calypso.localhost:3000 and the locale to tr.
Gravatar
WP Job Manager
VIP
P2

Pre-merge Checklist

• Has the general commit checklist been followed? (PCYsg-hS-p2)
• Have you written new tests for your changes?
• Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
• Have you checked for TypeScript, React or other console errors?
• Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
• Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
  • For UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)? The length of text and words vary significantly between languages.
• For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:commit-97be6ee1a08447e05186504ba807a656825bac2a

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:commit-97be6ee1a08447e05186504ba807a656825bac2a&env=jetpack

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:commit-97be6ee1a08447e05186504ba807a656825bac2a&env=a8c-for-agencies

[matticbot]

This PR does not affect the size of JS and CSS bundles shipped to the user's browser.

Generated by performance advisor bot at iscalypsofastyet.com.

[adamwoodnz]

Thanks for looking at this. Sorry but could you explain how to change locale in more detail? I tried adding ?locale=tr_TR to the URL but it's not working.

I notice that even without longer strings this change makes the right column wider than the left, which I don't think is desirable:

@jasmussen @crisbusquets requesting your input please 🙏

The layout of these buttons is tricky with the left aligned icon and center aligned text. Other approaches could be to either let the button text wrap, or use ellipsis to truncate really long strings if we want to keep the right column layout consistent.

[jasmussen]

At a glance the solution feels okay to me, insofar as it avoids the awkward cropping of the existing translations, especially if paired with some min-widths.

The example in turkish is good because it's just really hard to compress that. If we believe taht "Email me a login link" and "Log in via Jetpack app" are as short as they can be in order to still be comprehensible labels, then those just get that long in turkish.

So outside of changing the buttons to possibly grow, the only other alternative is to increase the max-width of this main column, and wrap it to mobile sooner. Tricky.