Make WordPress Core

Opened 5 years ago

Closed 4 years ago

#46304 closed defect (bug) (fixed)

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

Reported by: garrett-eclipse's profile garrett-eclipse Owned by: garrett-eclipse's profile garrett-eclipse
Milestone: 5.4 Priority: normal
Severity: normal Version: 4.9.6
Component: Privacy Keywords: has-patch has-screenshots commit
Focuses: ui Cc:

Description

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

Attachments (4)

46304.diff (424 bytes) - added by garrett-eclipse 5 years ago.
Switching to word-wrap: break-word and white-space: normal
46304.2.diff (413 bytes) - added by garrett-eclipse 4 years ago.
Refreshed patch to apply word-wrap: break-word and white-space: normal to .privacy_requests .next_steps .button
af13d5dcec681c9b0040d49ac8d1f212.gif (674.7 KB) - added by garrett-eclipse 4 years ago.
Before: Illustrates the issue
f7651012a664ba0973282515bd1ce05e.gif (914.7 KB) - added by garrett-eclipse 4 years ago.
After: Illustrates the fix

Download all attachments as: .zip

Change History (13)

#1 follow-up: @afercia
5 years ago

  • Component changed from Administration to Privacy
  • Focuses accessibility privacy removed

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
5 years ago

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

#2 in reply to: ↑ 1 @garrett-eclipse
5 years ago

  • Keywords has-patch 2nd-opinion ui-feedback added
  • Owner set to garrett-eclipse
  • Status changed from new to assigned

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;:
https://meta.trac.wordpress.org/ticket/1157
https://core.trac.wordpress.org/ticket/36207
https://core.trac.wordpress.org/ticket/22554
https://core.trac.wordpress.org/ticket/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?

Version 0, edited 5 years ago by garrett-eclipse (next)

This ticket was mentioned in Slack in #design by karmatosed. View the logs.


4 years ago

#4 @nrqsnchz
4 years ago

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
4 years ago

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

@garrett-eclipse
4 years ago

Before: Illustrates the issue

@garrett-eclipse
4 years ago

After: Illustrates the fix

#5 @garrett-eclipse
4 years ago

  • Keywords 2nd-opinion ui-feedback removed
  • Milestone changed from Awaiting Review to 5.4

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.

#6 @nrqsnchz
4 years ago

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.

#7 @garrett-eclipse
4 years ago

  • Keywords has-screenshots commit added
  • Status changed from assigned to accepted

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.

#8 @garrett-eclipse
4 years ago

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.

#9 @SergeyBiryukov
4 years ago

  • Resolution set to fixed
  • Status changed from accepted to closed

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.

Note: See TracTickets for help on using tickets.