WordPress.org

Make WordPress Core

Opened 4 weeks ago

Last modified 10 days ago

#47329 reviewing defect (bug)

Overflowing code element on mobile

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

Description

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 4 weeks ago.
chrome.png (163.8 KB) - added by david.binda 4 weeks ago.
firefox-long-word.png (109.4 KB) - added by david.binda 4 weeks ago.

Download all attachments as: .zip

Change History (13)

@david.binda
4 weeks ago

@david.binda
4 weeks ago

#1 @SergeyBiryukov
4 weeks ago

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

Related: #41559

#2 @SergeyBiryukov
4 weeks ago

  • Focuses ui administration added

#3 @mukesh27
4 weeks 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.


2 weeks ago

#5 @marybaum
2 weeks ago

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

#6 @marybaum
2 weeks ago

  • Owner changed from marybaum to @…

#7 @marybaum
2 weeks 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
2 weeks ago

  • Keywords commit added

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


2 weeks ago

#10 @SergeyBiryukov
10 days 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.

Note: See TracTickets for help on using tickets.