Overflowing code element on mobile

[david.binda]

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.

[SergeyBiryukov]

Related: #41559

[mukesh27]

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

[marybaum]

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?

[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.

[SergeyBiryukov]

In 45692:

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

Props david.binda, mukesh27.
Fixes #47329.

[SergeyBiryukov]

#46962 was marked as a duplicate.