WordPress.org

Make WordPress Core

Opened 6 months ago

Closed 4 months ago

Last modified 3 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: trunk
Component: Administration Keywords: has-patch commit
Focuses: ui, administration Cc:
PR Number:

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

Download all attachments as: .zip

Change History (15)

@david.binda
6 months ago

@david.binda
6 months ago

#1 @SergeyBiryukov
6 months ago

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

Related: #41559

#2 @SergeyBiryukov
6 months ago

  • Focuses ui administration added

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


5 months ago

#5 @marybaum
5 months ago

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

#6 @marybaum
5 months ago

  • Owner changed from marybaum to @…

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

  • Keywords commit added

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


5 months ago

#10 @SergeyBiryukov
5 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
4 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
3 months ago

#46962 was marked as a duplicate.

Note: See TracTickets for help on using tickets.