[wp-trac] [WordPress Trac] #47329: Overflowing code element on mobile

[WordPress Trac]

#47329: Overflowing code element on mobile
----------------------------+-----------------------------
 Reporter:  david.binda     |      Owner:  (none)
     Type:  defect (bug)    |     Status:  new
 Priority:  normal          |  Milestone:  Awaiting Review
Component:  Administration  |    Version:  trunk
 Severity:  normal          |   Keywords:
  Focuses:                  |
----------------------------+-----------------------------
 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:

 {{{#!css
 @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.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/47329>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform