swalling wrote:

Ukrainian

Attached:

swalling wrote:

French

Attached:

swalling wrote:

The biggest impact on the UI here is when the user has the two calls to action. #mw-gettingstarted-editable-main-fix-pages tends to wrap, even to the point of being pushed to a second line, even after we limited the button's width to 210px.

The Wikipedias that will soon have both CTAs, and where the worst wrapping happens, is:

• ca
• de
• es
• fr
• ru
• uk

I've attached screenshots of three examples to show you the varying degrees of what can happen.

Now, this technically isn't broken, since the user can scroll within the modal. But that's a really crappy experience. If we continue to need to use fixed width rendering, we should consider partially undoing the change that limited the width even more (gerrit 110946).

Change 114347 had a related patch set uploaded by Mattflaschen:
Center GettingStarted modal in IE7+

https://gerrit.wikimedia.org/r/114347

Change 114347 merged by jenkins-bot:
Center GettingStarted modal in IE7+

https://gerrit.wikimedia.org/r/114347

That also improves matters somewhat for long text.

It doesn't put the buttons on one line (there is an explicit width). However, it does remove the explicit height, which means it expands vertically rather than requiring scrolling.

I'll attach new screenshots of those languages.

Created attachment 14658
GettingStarted modal after centering fix in Chromium with Ukranian

Attached:

Created attachment 14659
GettingStarted modal after centering fix in Chromium with French

Attached:

swalling wrote:

Tested this on piramido.wmflabs.org and mostly it looks good... but French + the single CTA has the text overflowing. (See attachment).

swalling wrote:

French single CTA on piramido after centering fix

Attached:

(In reply to Steven Walling from comment #10)

Created attachment 14676 [details]
French single CTA on piramido after centering fix

It looks as if .mw-ui-button is still styled with white-space: nowrap; Is mediawiki up to date on piramido?

Attached:

swalling wrote:

(In reply to Sam Smith from comment #11)

(In reply to Steven Walling from comment #10)

Created attachment 14676 [details]
French single CTA on piramido after centering fix

It looks as if .mw-ui-button is still styled with white-space: nowrap; Is
mediawiki up to date on piramido?

Yes it looks like white-space: normal; is what's in prod, and applying that fixes this issue.

Attached:

swalling wrote:

This is much better now. Smaller additional changes can be filed in a separate bug.

Yes, after updating piramido core to wmf/1.23wmf15, I get the following screenshots in Firefox. The first is with the category configuration missing (so it's the one-button modal), the second is after I fixed that.

Created attachment 14680
GettingStarted one-button modal with nowrap and centering fix in Firefox with French

Attached:

Created attachment 14681
GettingStarted two-button modal with nowrap and centering fix in Firefox with French

Attached: