WordPress.org

Make WordPress Core

Opened 14 months ago

Closed 11 months ago

Last modified 11 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:

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

Download all attachments as: .zip

Change History (15)

@david.binda
14 months ago

@david.binda
14 months ago

#1 @SergeyBiryukov
14 months ago

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

Related: #41559

#2 @SergeyBiryukov
14 months ago

  • Focuses ui administration added

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


13 months ago

#5 @marybaum
13 months ago

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

#6 @marybaum
13 months ago

  • Owner changed from marybaum to @…

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

  • Keywords commit added

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


13 months ago

#10 @SergeyBiryukov
13 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
11 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
11 months ago

#46962 was marked as a duplicate.

Note: See TracTickets for help on using tickets.