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

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

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

Possibly a regression from the AuthManager/HTMLForm rewrite?

Event Timeline

matmarex created this task.Aug 25 2016, 6:27 PM
Restricted Application added a project: Internet-Archive. · View Herald TranscriptAug 25 2016, 6:27 PM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript
matmarex claimed this task.Aug 25 2016, 6:28 PM
matmarex triaged this task as Normal priority.
matmarex removed a project: Internet-Archive.
matmarex added a subscriber: Tgr.
Tgr added a comment.Aug 25 2016, 6:36 PM

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

matmarex closed this task as Resolved.Aug 25 2016, 11:55 PM
matmarex removed a project: Patch-For-Review.

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

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.).
Nnvu added a subscriber: Nnvu.Dec 1 2017, 11:49 PM

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.


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.

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 :)

valerio.bozzolan added a comment.EditedDec 2 2017, 5:22 PM

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: ' ';
}

Or at least, with that small compromise:

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