Make WordPress Core

Opened 5 years ago

Closed 5 years ago

Last modified 5 years ago

#47329 closed defect (bug) (fixed)

Overflowing code element on mobile

Reported by: davidbinda's profile david.binda Owned by: sergeybiryukov's profile SergeyBiryukov
Milestone: 5.3 Priority: normal
Severity: normal Version: 5.3
Component: Administration Keywords: has-patch commit
Focuses: ui, administration Cc:


Similarly to the responsibility issues reported in #28161 , there seems to be an issue with overflowing of a code element in a table on mobile devices - specifically Webkit based ones (Chrome, Safari), but also in Firefox, yet only in an edge (described below).

The issue is reproducible on a vanilla WordPress install on the permalinks administration page even in a responsive development mode in Chrome.

The current CSS style - word-wrap: break-word; feels to be only properly working in Firefox now (at least in my testing), but only up to a point, where there is some really long word (see attached screenshot).

Playing around with multiple options, it looks like following combination fixes the issue across the board:

@media screen and (max-width: 782px) {
        code {
                word-wrap: break-word;
                word-wrap: anywhere; /* Firefox. Allow breaking long words anywhere */
                word-break: break-word; /* Webkit: Treated similarly to word-wrap: break-word */

I've tested both, the current issue and proposed patch, in Chrome, Safari, Firefox on both desktop and mobile and it seems to do the trick when improving the display.

Attachments (3)

47329.diff (446 bytes) - added by david.binda 5 years ago.
chrome.png (163.8 KB) - added by david.binda 5 years ago.
firefox-long-word.png (109.4 KB) - added by david.binda 5 years ago.

Download all attachments as: .zip

Change History (15)

5 years ago

5 years ago

#1 @SergeyBiryukov
5 years ago

  • Milestone changed from Awaiting Review to 5.3
  • Owner set to SergeyBiryukov
  • Status changed from new to reviewing

Related: #41559

#2 @SergeyBiryukov
5 years ago

  • Focuses ui administration added

#3 @mukesh27
5 years ago

  • Keywords has-patch added

I tested attached patch successfully without any error in Ubuntu 18.04.2 LTS with Google Chrome Version 74.0.3729.157 and Firefox Version 66.0.5

This ticket was mentioned in Slack in #core by marybaum. View the logs.

5 years ago

#5 @marybaum
5 years ago

  • Milestone changed from 5.3 to 5.2.2
  • Owner changed from SergeyBiryukov to marybaum

#6 @marybaum
5 years ago

  • Owner changed from marybaum to @…

#7 @marybaum
5 years ago

Hi, @SergeyBiryukov

At bugscrub consensus seemed to be that this is ready to commit for 5.2.2 -- do you have time to do that before Thursday?

#8 @marybaum
5 years ago

  • Keywords commit added

This ticket was mentioned in Slack in #core by audrasjb. View the logs.

5 years ago

#10 @SergeyBiryukov
5 years ago

  • Milestone changed from 5.2.2 to 5.3
  • Owner changed from @… to SergeyBiryukov

We don't have any other instances of word-wrap: anywhere; in core, so I'd like to give this some more testing on various platforms, along with #41559.

#11 @SergeyBiryukov
5 years ago

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

In 45692:

Administration: Allow breaking long strings in <code> tags at any point, to avoid overflowing on mobile.

Props david.binda, mukesh27.
Fixes #47329.

#12 @SergeyBiryukov
5 years ago

#46962 was marked as a duplicate.

Note: See TracTickets for help on using tickets.