On the privacy request table buttons switch to break-word for legibility

[garrett-eclipse]

Hello,

Depending on the screensize the buttons in privacy request tables start to downgrade breaking to 2+lines depending on locale. Currently the css is break-all which causes the string to become illegible. Switching to break-word in the css will allow the button text to be readable.

Gif Example;
​https://gyazo.com/5aa60b8dda2eacbd23e9c95086ac8e3d

The breakdown for english starts around 1020 down to 920. For other locales and users with zoomed browsers the breakpoints will differ as to when this falls apart.

The css for this can be found here - ​https://github.com/WordPress/WordPress/blob/173e0f9ee7b7f7dee03c351f2f9bf968759eb20e/wp-admin/css/forms.css#L1141

Thanks

[afercia]

Seems this was intentional, see [43282]. Worth investigating on the reasons for that change, see the related ticket.

I'd also note the CSS value unset used for white-space is not supported by IE11 and shouldn't be used.

[garrett-eclipse]

Switching to word-wrap: break-word and white-space: normal

[garrett-eclipse]

Replying to afercia:

Seems this was intentional, see [43282]. Worth investigating on the reasons for that change, see the related ticket.

Thanks @afercia I see what you mean with the second commit switching to break-all. I went through Slack and Trac surrounding the ticket and couldn't find any explanation provided. Maybe @azzozz has information as he made both commits. Only thought I had was the original CSS was word-break: break-word; which isn't an official value and is only supported on Webkit browsers.
Reference - ​https://caniuse.com/#search=word-break
*Also it seems to indicate break-all is only partially supported.

From my investigation on Trac and Google is that the norm for this sort of thing appears to be going with word-wrap: break-word; as it's most widely supported.
Reference - ​https://caniuse.com/#search=overflow-wrap

Other Trac tickets/changes that went with word-wrap: break-word;:
​#meta1157 #36207 #22554 #22359

Replying to afercia:

I'd also note the CSS value unset used for white-space is not supported by IE11 and shouldn't be used.

Thanks for pointing that out, I supplied a patch where I switched it to 'normal'. Is that a fairly safe approach or do you recommend a different setting?

[nrqsnchz]

word-wrap: break-word; sounds like a good solution. Would be great to see some before/after screenshots or gifs for final confirmation.

[garrett-eclipse]

Refreshed patch to apply word-wrap: break-word and white-space: normal to .privacy_requests .next_steps .button

[garrett-eclipse]

Before: Illustrates the issue

[garrett-eclipse]

After: Illustrates the fix

[garrett-eclipse]

Hi @nrqsnchz

I've refreshed the patch in 46304.2.diff and provided before and after gifs for you to confirm. If you could review I think this is a good 5.4 candidate so if you're happy with it feel free to mark for commit.

[nrqsnchz]

hey @garrett-eclipse!

Gifs from the new patch look good! 👍

if you're happy with it feel free to mark for commit

Apologies, I've never marked a ticket for commit and I'm not sure how to do it. I don't see a keyword or focus that would mark it for commit.

[garrett-eclipse]

Thanks for confirming @nrqsnchz

commit is a Workflow Keyword to be added once the patch is fully tested/vetted and ready for a final committers review. I've updated the ticket to mark it for commit.

[garrett-eclipse]

It would be beneficial for this to be released in the same version as #44264 as it resolves the button UI for the progress indicator there.

[SergeyBiryukov]

In 47376:

Privacy: Switch buttons in Next Steps column of privacy request tables to break-word for better legibility on various screen sizes.

Props garrett-eclipse, afercia, nrqsnchz.
Fixes #46304.