Export/Erase tools: CSS issues with `next_steps` buttons with some locales

[audrasjb]

This issue happens in fr_FR localization.
Since this string is prepared for internationalization, these button text can be quite longer than in English, so we should remove word-wrap: nowrap CSS declaration and add some CSS fixes to make it clean.

Some screenshots below.

(note: this is a quite minor bug, so I guess it can be milestoned to 4.9.7 since 4.9.6 RC2 is about to land)

[audrasjb]

bug happens in fr_FR locale

[ianbelanger]

Added CSS for export button to prevent cutoff in French Language

[ianbelanger]

screenshot of export buttons in french

[audrasjb]

Thanks @ianbelanger for this patch!

I think it can be nice to reduce the line height inside the button, and I noticed we should also add some vertical padding after line-height fixes in my live tests on my browser inspector ;-)

[audrasjb]

Note regarding future tests:
we just changed these strings in fr_FR locale, so please add some words for future tests :)

[ianbelanger]

Updated view

[ianbelanger]

Added line-height and vertical padding to buttons

[audrasjb]

Thank you @ianbelanger !

I tested 44092.2.diff on several browser and it seems nice.
But I also noticed there is some issues with mobile screens.
These issues also happened before your patch, so I think we'd better open a new ticket to fix it later, since RC2 will land in few hours.

Cheers,

Jb

[audrasjb]

This patch needs refresh.I'm on it. (see slack mentions)

[audrasjb]

Patch refresh with some changes

[audrasjb]

In 44092.3.diff:

• move CSS rule to wp-admin/css/form.css
• ensure this rule is self contained to avoid breaking changes
• fixed the main issue (tested on both desktop and mobile/tablet)

Cheers

Jb

[ianbelanger]

line-height seems a little to tall imho

[azaozz]

Tested this but seems we need the line-height: 1.5 in there :)

Mixture of 44092.2.diff and 44092.3.diff like this works?

.privacy_requests .next_steps .button {
    height: auto;
    word-break: break-word;
    white-space: unset;
    line-height: 1.5;
    padding: 4px 10px;
}

[ianbelanger]

Updated patch with line-height and padding adjustments

[audrasjb]

Fixes line-height and padding

[ianbelanger]

Updated patch with line-height: 1.5; padding: 4px 10px;

[azaozz]

In 43278:

Privacy: fix styling of the "next steps" buttons on the Export/Erase tools screens when text is long.

Props audrasjb, ianbelanger.
Fixes #44092.

[melchoyce]

Looks good to me.

[azaozz]

In 43281:

Privacy: fix styling of the "next steps" buttons on the Export/Erase tools screens when text is long.

Props audrasjb, ianbelanger.
Merges [43278] to the 4.9 branch.
Fixes #44092.

[azaozz]

In 43282:

Privacy: use the more compatible word-break: break-all;, see [43278].

See #44092.

[azaozz]

In 43283:

Privacy: use the more compatible word-break: break-all;, see [43278].

Merges [43282] to the 4.9 branch.
See #44092.

[desrosj]

Moving to the new Privacy component.