Fixed Text inside button not centered properly

[Luxus]

If you open a report, you will see this small button:



The text inside this button has a wrong line-height. It isn't consistent with other similar buttons. I have found that a line-height of 20px would center it properly.

 

[Paul B]

It's using the same .button class as the buttons below the editor, which also have a line height of 23px.

Are those buttons also not vertically centred for you?

 

[Luxus]

Are those buttons also not vertically centred for you?

No, they are fine. Also note that I was using the untouched default style.

 

[Paul B]

Ah, it appears to be specific to Firefox.
Chrome is fine.

 

[Mike]

Firefox has a long standing line-height bug (open since 2001 I think) that relates to mixing <a>, <button> and <input>. It's possible that's rearing its head here.

 

[Luxus]

Yeah it appears it's really a firefox bug. For now this seems to fix it:

@-moz-document url-prefix() {
	.report_view .actionList .button
	{
		line-height: 20px;
	}
}

 

[Mike]

I think the proper line-height is actually 21px, since we use border-box sizing with a 1px border and a height of 23px. I've played around with this and it doesn't appear to change anything visually aside from this case.

As such, I'm making this change for 1.3. I'm not 100% confident that it won't change something unexpectedly, so best to run though beta.