I have increased the form - width to 400px,

attached the screenshot for Final output.

{F56226073}

Please point out, if I have made any mistake.
~ Thanks.

Change #1052166 had a related patch set uploaded (by Agamyasamuel; author: Agamyasamuel):

[mediawiki/core@master] Fixed: Login warning message is cut off

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

Hey @RHo does design have any input on how this should behave? I think the Growth team usually maintains login page so also tagging them. Let me know if that's wrong!

thanks @Jdlrobson - the style of the notice being incorrectly a warning was already flagged and being addressed in T366127: Change 'Wikipedia is made by people like you' warning to a Notice message by the Growth team. Adding @JFernandez-WMF @KStoller-WMF in case they want to merge to ensure fix can be done on the same ticket.

Thanks! I think we can keep this task separate, but perhaps @Sgs or @Cyndymediawiksim can provide some help with code review / support for https://gerrit.wikimedia.org/r/1052166 since they are working on similar code at the moment as part of T366127.

Change #1054274 had a related patch set uploaded (by Jdlrobson; author: GauriGuptaa):

[mediawiki/core@master] Login warning message is cut off

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

@KStoller-WMF there is a question on the patch if someone from the growth team could help guide!

@Jdlrobson I'd be happy to help on the patch review but I'm not fully understanding the issue here. Is that The message should not be cut. ? Or is Could we increase this to 400px or 500px? a design change request? The volunteer's patch is achieving both so the task is resolved in a way. Could we add context on why the message should not be cut? The problematic styles seem to live under .cdx-message__content so rather we need (1) to do some changes in Codex to add utility classes to handle word wrapping or we need (2) to overwrite them from userlogin.less.

In T353005#10058656, @Sgs wrote:

@Jdlrobson I'd be happy to help on the patch review but I'm not fully understanding the issue here. Is that The message should not be cut. ? Or is Could we increase this to 400px or 500px? a design change request? The volunteer's patch is achieving both so the task is resolved in a way. Could we add context on why the message should not be cut?

Breaking the word doesn't seem very user friendly here given the available space and the intention. Mobile already has a limited width, and given the existing 290px width restriction was not documented it seemed like it should be re-evaluated. On mobile minimum width is typically 400px these days - so the login form is wider on mobile than it is on desktop. Is this intentional? I suspect this has also been designed for desktop where the font size was 14px but hasn't considered that mobile has a 16px font size.

It seems like it would be useful for the Growth team designer to weigh in whether this restriction is helpful and makes sense and at the very least document the intention behind it so this is at least better understood. As you point out to me it is not clear the context for why this limited width exists in the first place and why it is so small - what does 290px equate to?

The problematic styles seem to live under .cdx-message__content so rather we need (1) to do some changes in Codex to add utility classes to handle word wrapping or we need (2) to overwrite them from userlogin.less.

Overwriting them in userlogin.less would be fine. That seems to be the current behaviour for enforcing the limited width!

fwiw - these word breaks also affect other notices during the authentication process, for example the two-factor authentication step (on both mobile and desktop):

In T353005#10058735, @Jdlrobson wrote:

It seems like it would be useful for the Growth team designer to weigh in whether this restriction is helpful and makes sense and at the very least document the intention behind it so this is at least better understood. As you point out to me it is not clear the context for why this limited width exists in the first place and why it is so small - what does 290px equate to?

Tagging @JFernandez-WMF to weigh in on this.

But just so I'm clear on the impact: this seems to only be an issue when viewing the mobile version from a desktop device, correct?
When testing multiple mobile screensizes on a device simulator, I'm never seeing line-breaking hyphenation occur.

But just so I'm clear on the impact: this seems to only be an issue when viewing the mobile version from a desktop device, correct?

No this also impacts the desktop skin for OAuth workflows (see @Krinkle's comment above).

When testing multiple mobile screensizes on a device simulator, I'm never seeing line-breaking hyphenation occur.

Correct. There is no minimum width on mobile resolutions, so actually on most devices this box is bigger than the desktop site! :-)

When testing multiple mobile screensizes on a device simulator, I'm never seeing line-breaking hyphenation occur.

Correct. There is no minimum width on mobile resolutions, […]

While there may be no minimum width specified in CSS, mobile devices are physically not of infinite width. Their width is no different from specifying a min-width. The word-wrap: break-word; rule is there on mobile just the same.

The above screenshot wraps neatly at most screen sizes because it is an English sentence with (mostly) unbreakable words like "is", "like" and "you". As long as there is a sentence that is longer than the width (i.e. it spans two or more lines), we will see cuts.

The above example wraps over two lines, even in the above screenshot. Therefore, it will cut. Note that we don't display just one sentence in one language on one wiki. We display any of thousands of messages there, the vast majority of which (like the above) span more than one line.

• Log in
• Welcome
• Create account
• Permission error
• 2FA
• Error messages during account creation or log in
• Default translation of the these in 400 languages.
• Customization to the wording of these on 900 wikis.

The below is that same login screen in the default translation for Spanish or German (no customisation):

Or in English, with a customisation that adds one word in the sentence, thus moving the breakpont from, after, to inside, the word "people":

The below is an an example that we show to people by default in English, without customization, which I encounter on a weekly basis. It's a permission warning, which has enough longer words to create a word cuts. Including on the iPhone SE that I carry:

In the Message component, we set word-wrap: break-word and hyphens: auto via an internal hyphens() mixin to prevent long words from overflowing the container and ensure that sensible hyphens are added by the browser when it breaks words. For instance, here's an OOUI message (which doesn't use either CSS property) with a very long German word:

And here's the Codex message (using lang="de" to get language-specific hyphens working):

This is a contrived example, but we have had real-world cases where long words or URLs have exceeded the length of the container and can't be broken without these properties.

The specific issue here is the hyphens property, which seems to cause lines to break more opportunistically when a hyphen can be inserted, at least in the flex layout of the Message component. If you remove the hyphens rule for the examples from this task, the long-ish words will be placed on a new line rather than broken. However, we're testing specific messages in a single language, so we should think carefully about whether to remove hyphens for all Messages. I see two paths forward:

1. Keep setting hyphens: auto in the Message component, and set hyphens: manual (the default value, which will only add manually-placed hyphens), hyphens: initial, or hyphens: unset in feature code when hyphens are problematic.
2. Remove hyphens: auto from the Message component, but offer the Codex hyphens mixin publicly (there's a similar one in MediaWiki core mixins) or just suggest adding hyphens: auto when long strings can be expected.

Neither of these is a perfect solution, since we can't predict what would be ideal for every language for a given message. I'm curious what you all and @Volker_E
think.

@Krinkle, what I meant to get across was that a width of 290px is applied at the breakpoint of 640px which is the threshold for tablet devices:

So for anything below 640px, the message box is larger. e.g. the message box appears smaller on an iPad Air (820px) than an iPhone (390px) which seems unexpected.

We're going to explore solutions to this in T372896: [Spike] Explore solutions to known issues with the hyphens mixin.

Change #1054274 merged by jenkins-bot:

[mediawiki/core@master] Login warning message is cut off

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

Is this is how the form is intended to look after the change?

@matmarex I've been chatting with @Volker_E about this today and we're working this out. There will likely be a follow up.

Change #1052166 abandoned by Jdlrobson:

[mediawiki/core@master] Fixed: Login warning message is cut off

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

Change #1148928 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/core@master] Revert "Login warning message is cut off"

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

Hi Gauri - we are cautiously reverting this as I need to review this further with the designers. I'll get back to you once we have clearer requirements here. This revert doesn't reflect the quality of your code!

Thanks for working on this and helping us understand this ticket better! I've improved the requirements based on the useful discussion we've had so far!

Change #1148928 merged by jenkins-bot:

[mediawiki/core@master] Revert "Login warning message is cut off"

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

The hyphenation part of this issue is resolved now that Codex v2.2.0 is merged into core. I've opened a separate task for the message icon that's cut off.

Change #1052166 restored by Agamyasamuel:

[mediawiki/core@master] Fixed: Login warning message is cut off

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

Change #1052166 abandoned by Agamyasamuel:

[mediawiki/core@master] Fixed: Login warning message is cut off

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