UI issue on Privacy Policy Guide page

[sumitsingh]

Hi,

UI issue on Privacy Policy Guide page. See mentioned screenshot.

Thank you

[sumitsingh]

button UI issue on Privacy Policy Guide tab in iPhone 5/SE

[SergeyBiryukov]

Hi there, thanks for the ticket!

Moving to 5.7.1 for investigation and testing, as this could be a result of the changes in #49264.

[jaymanpandya]

@sumitsingh Can you share the URL of the page where you see this bug? I cannot find where this page is!

[sabernhardt]

The (relative) URL is
/wp-admin/options-privacy.php?tab=policyguide

It's also here:
/wp-admin/privacy-policy-guide.php?tab=policyguide

[sabernhardt]

This was not usually a problem in 5.6 (depending on language) because the button had been outside the white box.

In French, it already broke at wider mobile sizes with the translation "Copier la suggestion de texte de politique de confidentialité dans le presse-papiers"

We may want something like this for mobile sizes, to wrap the text without having such a large line-height:

.wp-core-ui .privacy-text-copy {
    white-space: normal;
    padding-top: 8px;
    padding-bottom: 8px;
    line-height: 1.5;
}

We also could consider a more global style change for other buttons that might be too wide, but perhaps that would belong in another milestone/ticket.

[palmiak]

I agree with @sabernhardt solution, but maybe a more global variant would be better:

.wp-core-ui .button, .wp-core-ui .button-primary, .wp-core-ui .button-secondary {
white-space: normal;
line-height: 1.5;
}

There is a chance that some other buttons will have the same problem, on some languages.

EDIT:
the fix to CSS would look like this:

.wp-core-ui .button,
.wp-core-ui .button-primary,
.wp-core-ui .button-secondary {
        display: inline-block;
        text-decoration: none;
        font-size: 13px;
        line-height: 1.5; /* 28px */
        min-height: 30px;
        margin: 0;
        padding: 0 10px;
        cursor: pointer;
        border-width: 1px;
        border-style: solid;
        -webkit-appearance: none;
        border-radius: 3px;
        white-space: normal;
        box-sizing: border-box;
}

@media screen and (max-width: 782px) {

        .wp-core-ui .button,
        .wp-core-ui .button.button-large,
        .wp-core-ui .button.button-small,
        input#publish,
        input#save-post,
        a.preview {
                padding: 0 14px;
                line-height: 1.5; /* 38px */
                font-size: 14px;
                vertical-align: middle;
                min-height: 40px;
                margin-bottom: 4px;
        }

I can't see any problems with such fix right now, but maybe this nowrap and big line-height was there for a reason.

Also if we would change those - should we also remove nowrap from editor.css and jquery-ui-dialog.css

[audrasjb]

I'm a bit hesitant about introducing such a general change. I will probably introduce a lot of changes elsewhere, so I think would be really less dangerous to fix it on a case by case basis.

For this specific change, we have a dedicated class to target: .button.privacy-text-copy

I believe a general change on buttons behavior should be addressed on a dedicated ticket :)

[audrasjb]

Privacy settings: address text overflow in copy privacy policy buttons

[audrasjb]

Result on mobile

[audrasjb]

One issue I can see with using white-space: normal everywhere is related to buttons displayed inside a text paragraph.

[palmiak]

Replying to audrasjb:

One issue I can see with using white-space: normal everywhere is related to buttons displayed inside a text paragraph.

OK I see - you're right. Thanks for pointing this.

Your solution is OK IMO :) Good job.

[davidbaumwald]

@audrasjb Thanks for the updated patch. It works well at resolving the overflow.

Looking at this a bit more holistically, should there be some margin between the copy and the button? Tagging for design input.

[peterwilsoncc]

Replying to davidbaumwald:

Looking at this a bit more holistically, should there be some margin between the copy and the button? Tagging for design input.

Testing with and without the patch the margin is unchanged but that may well be part of the bug with the button. While a specific fix is great for 5.7.1, a generic fix for 5.8 would be great so a less specific selector could be used.

[audrasjb]

@davidbaumwald @peterwilsoncc yes I'd recommend to avoid any general change in a minor (but it's still nice to fix the specific issue in 5.7.1).
I believe we're good to go with this small change that fix the self-contained issue reported in this ticket :)

We should of course consider opening another ticket for 5.8 and general changes in WP-Admin buttons.

[davidbaumwald]

@peterwilsoncc @audrasjb Great, thanks you both!

Picking this one up for review and commit for overflow fix.

[paaljoachim]

Looks good! Design has no comments.

[peterwilsoncc]

Thanks for the follow up folks, 52751.diff​ is good for commit.

[peterwilsoncc]

In 50568:

Privacy: Wrap text in buttons on privacy policy guide.

On narrow screens allow the text to wrap in the copy buttons on the privacy policy guide screen to avoid horizontal overflow of the parent container.

Props audrasjb, davidbaumwald, jaymanpandya, paaljoachim, palmiak, sabernhardt, SergeyBiryukov, sumitsingh.
Fixes #52751.

[peterwilsoncc]

Reopening for commit to the 5.7 branch following second a committer's sign-off.

[davidbaumwald]

@peterwilsoncc Looks good to backport.

[peterwilsoncc]

In 50574:

Privacy: Wrap text in buttons on privacy policy guide.

On narrow screens allow the text to wrap in the copy buttons on the privacy policy guide screen to avoid horizontal overflow of the parent container.

Props audrasjb, davidbaumwald, jaymanpandya, paaljoachim, palmiak, sabernhardt, SergeyBiryukov, sumitsingh.
Merges [50568] to the 5.7 branch.
Fixes #52751.

[sumitsingh]

Hi,

I have updated 5.7.1 and I think we need to some space before button?You can see mentioned screenshot.

[sumitsingh]

Privacy Policy Guide button UI issue