Make WordPress Core

Opened 21 months ago

Closed 18 months ago

Last modified 18 months ago

#47329 closed defect (bug) (fixed)

Overflowing code element on mobile

Reported by: david.binda Owned by: 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 21 months ago.
chrome.png (163.8 KB) - added by david.binda 21 months ago.
firefox-long-word.png (109.4 KB) - added by david.binda 21 months ago.

Download all attachments as: .zip

Change History (15)

21 months ago

21 months ago

#1 @SergeyBiryukov
21 months ago

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

Related: #41559

#2 @SergeyBiryukov
21 months ago

  • Focuses ui administration added

#3 @mukesh27
21 months 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.

20 months ago

#5 @marybaum
20 months ago

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

#6 @marybaum
20 months ago

  • Owner changed from marybaum to @…

#7 @marybaum
20 months 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
20 months ago

  • Keywords commit added

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

20 months ago

#10 @SergeyBiryukov
20 months 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
18 months 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
18 months ago

#46962 was marked as a duplicate.

Note: See TracTickets for help on using tickets.