Horizontal overflow on mobile (<code> inside a notice box)

[ironnysh]

Hi there,
In my recent article, there's a notice box that includes a URL. Since this is a sample URL pattern (not an active link), I initially wrapped it in an inline code element. Unfortunately, this causes a horizontal overflow on mobile:

This bug can be solved in a few ways, for example, by adding word-break: break-word; to either the wp-block-wporg-notice class or to the <code> element inside the wp-block-wporg-notice__content class.

For now, I removed the wrapping <code> element, but it would be great to be able to mark this piece of text somehow and make it stand out from the explanation that precedes it.

[coffee2code]

This was also just reported in meta#7726 (which I've closed as a duplicate of this). It pertains to a post that (as of this moment) exhibits the behavior.

Note that I am able to reproduce the <code> overflow within the notice block using Chrome (on Mac and Android), but not Firefox (on Mac or Android).

[coffee2code]

As word-break: break-word; seems technically deprecated, the solution should ideally use overflow-wrap: anywhere;, which mostly means the same thing and is well supported. In testing, it worked fine.

[ironnysh]

Hey @coffee2code, thanks for looking into this.

Not sure what's the magic that Firefox does (nothing in the default stylesheet), but this can also be solved in the grid level (which might be better?):

Replace grid-template-columns: auto 1fr; with grid-template-columns: min-content minmax(0,1fr);.
Apparently, it's a long-standing “bug” :-)

BTW, there's a strange inline style on the parent notice box that messes up the formatting:
<div class="wp-block-wporg-notice is-info-notice" style="line-height:0.6">.