Page MenuHomePhabricator

"(help me choose)" link near the username field in the signup form looks out of place
Closed, ResolvedPublic

Description

"(help me choose)" link near the username field in the signup form looks out of place. It's for the username, but it's placed in the middle and doesn't look connected to anything.

https://en.wikipedia.org/wiki/Special:CreateAccount

pasted_file (943×1 px, 166 KB)

It was positioned next to the "Username" label until recently:

http://wayback.archive.org/web/20160507232833/https://en.wikipedia.org/wiki/Special:UserLogin/signup

pasted_file (943×1 px, 152 KB)

Possibly a regression from the AuthManager/HTMLForm rewrite?

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript
matmarex triaged this task as Medium priority.
matmarex removed a project: Internet-Archive.
matmarex added a subscriber: Tgr.

Thanks for looking into it!

It is entirely possible this was broken by AuthManager changing a hand-made template to HTMLForm. I compared visuals at the time but this text is not visible by default so I might have missed it.

I am not sure the old positioning is easily achievable, but at the very least it should look like it belongs to the username, not the password.

Change 306740 had a related patch set uploaded (by Bartosz Dziewoński):
LoginSignupSpecialPage: Restore old display of 'createacct-helpusername'

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

Change 306740 merged by jenkins-bot:
LoginSignupSpecialPage: Restore old display of 'createacct-helpusername'

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

Here to report that some users can experience an issue with the floating user name tip:

bug.png (125×359 px, 8 KB)

Some circumstances:

  1. Users who incremented font size in browser preferences (e.g. accessibility reasons)
  2. Vendor customizations / non-standard browsers (Mozilla Firefox 39.0 seems affected, or pherups only by Ubuntu customizations)
  3. Specially on wikis with more than few characters in MediaWiki:Createacct-helpusername (e.g.).

Firefox 39.x saw its end of life on August 11, 2015. If anyone is still running such an ancient insecure version they have much bigger problems, I am afraid =)

Yep!

(...and now the funny part: for years people insanely cared a lot about supporting ancient insecure versions of Internet Explorer :^)

Here to report that in Mozilla Firefox 39.0 the text seems rendered somehow bigger than normal and so in it.wiki I see this text wrapped.

bug.png (125×359 px, 8 KB)

https://it.wikipedia.org/w/index.php?title=Speciale:CreaUtenza

I cannot reproduce this problem with other newer versions of Mozilla Firefox, or with Chromium 43.0, so it seems only a bug in Mozilla Firefox 39.

The bigger text is probably because it's using a different font than most systems, I've seen this on many computers running Ubuntu (regardless of the browser). I get a similar effect on my machine when I change the font to Verdana – however, the text does not overlap the field, it pushes it down.

image.png (94×311 px, 5 KB)

If you're using Firefox 39 and want to fix this, I'd be happy to accept a patch (as long as it's simple), but don't expect anyone else to set up an old browser and experiment with it :)

Thinking on it generically, the problem is that we shouldn't rely on [[MediaWiki:Createacct-helpusername]]. If it's customizable it means that it shouldn't break the alignment when longer than the expected by the web designer.

For now, I think that locally we could simply avoid floating stuff:

#userloginForm .loginText span {
	float:none;
}
#userloginForm .loginText span:before {
	content: ' ';
}

Screenshot from 2017-12-02 18:00:02.png (113×343 px, 6 KB)

Or at least, with that small compromise:

#userloginForm .loginText span {
	float:none;
	font-size:11px;
}
#userloginForm .loginText span:before {
	content: ' ';
}

Screenshot from 2017-12-02 18:25:51.png (91×322 px, 5 KB)