Extra border is displaying at bottom of Help section in Firefox (Responsive : 778 * 841)

[jitendrabanjara1991]

In responsive, extra border is displaying at bottom of Help section in Firefox. (Responsive : 778 * 841) where it's working fine in chrome section.

[jitendrabanjara1991]

Extra border is displaying at bottom of help section

[afercia]

@jitendrabanjara1991 thanks. Interesting case. Worth noting it happens also with Chrome, it's just less visible.

Seems to me this was introduced in [32844] where the line-height was changed from a value in pixels line-height: 22px; to a unitless value: line-height: 1.7;.

On desktop, the computed value is 13 x 1.7 = 22px.
However, in the mobile view the font size increases to 14 pixels so the computed value becomes 23.8px.

Browsers have different rounding algorithms. They also render fonts in a slightly different way. This could explain why it's more evident with Firefox.

According to the WordPress coding standards "Line height should also be unit-less, unless necessary to be defined as a specific pixel value" but this is not always desirable. This is one of the cases where an unit-less value produces a bug :)

I'd lean towards moving some of the styles from the wrappers to the buttons, to that the buttons can increase their height keeping a correct styling.

[afercia]

46749.diff​ is a start. Some testing would be nice.

[ianbelanger]

Good to note that this also affects the Screen Options tab.

@afercia I did a quick test of your patch in Chrome, Firefox and IE11 on a Windows machine. It seems to fix the issue, but I will do some more extensive testing to make sure.

[afercia]

@ianbelanger thanks. I'm uncertain if keeping the box-shadow. It seems unnecessary to me but I tried to keep the original intent of the buttons style (even though the box-shadow is not that visible).a

[jitendrabanjara1991]

Hello @afercia and @ianbelanger

Thanks for the response.

I didn't get this point.

Version changed from 5.1 to 4.3.

Thanks.

[afercia]

@jitendrabanjara1991 it appears the bug was introduced in version 4.3. See ​https://make.wordpress.org/core/handbook/contribute/trac/

Version: The version of WordPress being used. Ideally, this would be the earliest affected or applicable version.

[jitendrabanjara1991]

Hello @afercia

Thanks for the response.

Ok. That means, this issue is again open in version 5.1.

Thanks.

[ianbelanger]

I tend to agree with you on removing the box-shadow @afercia, but since I am not a designer, I am going to tag this with needs-design-feedback and maybe we can get a designer to weigh in on it.

[afercia]

Seems a quick, nice, fix. Moving to 5.3 consideration pending design feedback.

[marybaum]

I gave @afercia the design feedback that we should probably remove a redundant border, so we're ready to commit.

[afercia]

Before and after screenshot (Firefox)

[afercia]

In 45501:

Administration: Remove extra border from the Screen Options and Help buttons.

The extra border was visible in the responsive view for smaller screens after [32844].

Props jitendrabanjara1991.
Fixes #46749.

[afercia]

Reopening for 5.2.2 consideration.

[afercia]

In 45502:

Administration: Improve the Screen Options and Help buttons focus style after [45501].

Amends [45501].
See #46749.

[afercia]

Last commit amends [45501] to restore the focus style previously missed. See new screenshot above.

[audrasjb]

Hi @afercia do you think we can have a backport for this ticket today so we can ship that on 5.2.2 RC1?
Thank you! The RC processing is going to start at 19:00 UTC.

[afercia]

In 45513:

Administration: Remove extra border from the Screen Options and Help buttons.

The extra border was visible in the responsive view for smaller screens after [32844].

Props jitendrabanjara1991.

Merges [45501] and [45502] to the 5.2 branch.
Fixes #46749 for 5.2.2.