Page MenuHomePhabricator

Regression: the Login form's secondary "Join Wikipedia" button is taller than its primary "Log in" button.
Closed, ResolvedPublic

Description

[Log in] is the main function of the login form, yet nowadays its [Join Wikipedia] button is taller in both Firefox and Chromium. #wpLoginAttempt is 20px tall, while #mw-createaccount-join is 24px tall. I think this happens the line-height within the vform is 17.25 while the line-height outside the form in the "call to action" is 22.4px.

The [Log in] button used to use class mw-ui-big, which overrode this height reduction. See this screen shot. @Jdlrobson removed it in d51772b6e ("Stop using mw-ui-big on login form buttons") . If we don't want it to have [Log in] a larger size, we certainly don't want it smaller.

Event Timeline

Spage raised the priority of this task from to Needs Triage.
Spage updated the task description. (Show Details)
Spage added subscribers: Spage, Jdlrobson.
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptOct 23 2015, 7:44 PM
Jdlrobson set Security to None.Oct 24 2015, 5:33 PM
Jdlrobson added a subscriber: Florian.
Florian claimed this task.Oct 24 2015, 6:26 PM

I think this happens the line-height within the vform is 17.25 while the line-height outside the form in the "call to action" is 22.4px

I'm not sure, if this exactly is the reason. If you use an input tag instead of an a-tag for the "Join Wikipedia" link, you'll get a button, which has exactly the same hight:

Both items are wrapped in the form and a mw-ui-vform div element. It seems, that (at least Chrome, I don't know, how FF/Safari handles it) line-height is handled different for an element, if it is inherited by another element (in this case: bodycontent / mw-body-content), see this little example, e.g.. I think the easiest way would be to use an input tag for the link. A cleaner way would be to apply the correct line-height to all a-tags with mw-ui-button. Let me upload a change :)

Change 248635 had a related patch set uploaded (by Florianschmidtwelzow):
Make sure, that a tags and input tags with mw-ui-button has the same height

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

The result of this (^) change:

Change 248635 merged by jenkins-bot:
Make sure, that a tags and input tags with mw-ui-button has the same height

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

Jdlrobson closed this task as Resolved.Oct 26 2015, 5:38 PM