GDPR Privacy Policy Link in wp-login.php page can overflow other links

[imath]

I'd suggest to remove the position: absolute css rule of the Privacy Policy link, because for some screen resolutions, it can be a bit messy... See the screenshot below:

[iandunn]

cc @melchoyce in case you have any input

[xkon]

Strange I remember adding a responsive rule just for that to also tackle the lower height screens. Maybe it got lost somewhere along the backports? :D

[melchoyce]

I'm still seeing the responsive styles in trunk:

@media (max-height: 600px) {
    .login .privacy-policy-page-link {
        position: relative;
        margin: 60px 0 20px 0;
    }
}

And it seems to display as expected for me.

@imath, can you provide some more details about where you're seeing this?

[desrosj]

Related: #43721.

The original intention was to have this link separated from the links immediately below the login form because those links are geared towards helping people sign up or log in (see geared towards helping people sign up or log in).

I think we just change the height in the media query to allow more space in case a plugin is adding custom links below the login form.

@imath Do you have custom links there?

[xkon]

Ah thanks @desrosj ! I've found it.

My patch had 850px instead of 600px see https://core.trac.wordpress.org/attachment/ticket/43721/43721.6.diff

So the responsive was cutting of way before you reach the links. Maybe we could go back to that @desrosj ? ( I didn't even notice that rule change ^_ )

[imath]

@melchoyce @desrosj it happens when i log off without any plugins/tweaks of any kind (fresh WordPress install). I advise you to test every login action (recovering password, etc...) because some adds a new message before the login form.

[desrosj]

44046.diff​ updates the max-height of the media query to 850. I am unable to get the links to overlap with this applied. I even added 5 additional custom links below the WordPress core links, and it still was enough of a buffer.

Tested on the reset password, login, and confirmation screens.

[imath]

@desrosj I confirm with 44046.diff patch applied it fixes the issue for me.

[desrosj]

Tested this again and still looks good.

[iandunn]

Positioning with 44046.diff and extra text via login_head

[iandunn]

Replace position: absolute with margins

[iandunn]

I'm wondering if using position: absolute is going to be problematic no matter what, especially when we take into account all the various things that plugins can do to customize the login screen.

For instance, if someone adds some extra text via login_head, the link can be still positioned over top of other elements, even with 44046.diff​ applied (screenshot).

44046.2.diff​ replaces the absolute positioning with margins, to provide some visual separation between the "action" links and the policy link.

@melchoyce: do you think that would be an acceptable compromise to accomplish your design goals?

Does anyone else have any feedback on that?

[desrosj]

44046.2.diff​ works for me. Tests well and looks good with lots of text before the login form (like in Shot 2018-05-14 at 12.56.41.png).

[melchoyce]

I tried some alternate methods for making the footer sticky, but none of them really worked. Let's go with 44046.2.diff​.

[iandunn]

In 43274:

Privacy: Reposition log in policy link to avoid overlapping elements.

Previously, the link used absolute positioning, in order to stick it at the bottom of the page. That was done in order to create visual separation between it and the "action" links, like "Lost Your Password?"

The absolute positioning can cause conflicts in some situations, though. For example, if extra text or error notices are added above the form, then the login link would be positioned on top of other elements.

Switching to relative positioning with extra margins avoids those issues, while maintaining the visual separation between the "action" links and the privacy policy link.

Props imath, melchoyce, desrosj, xkon, iandunn.
Fixes #44046.

[iandunn]

Reopening to consider backport to 4.9 branch.

[azaozz]

In 43276:

Privacy: Reposition log in policy link to avoid overlapping elements.

Previously, the link used absolute positioning, in order to stick it at the bottom of the page. That was done in order to create visual separation between it and the "action" links, like "Lost Your Password?"

The absolute positioning can cause conflicts in some situations, though. For example, if extra text or error notices are added above the form, then the login link would be positioned on top of other elements.

Switching to relative positioning with extra margins avoids those issues, while maintaining the visual separation between the "action" links and the privacy policy link.

Props imath, melchoyce, desrosj, xkon, iandunn.
Merges [43274] to the 4.9 branch.
Fixes #44046.

[desrosj]

Moving to the new Privacy component.