FSE Themes: Long words with big font sizes are not displaying correctly on smaller screens

[Gustavo-Hilario]

Quick summary

The text on the Paragraph and Heading blocks are not breaking into new lines when words are longer (or the font size is too big) than the screen width.

Steps to reproduce

1. Activate a block-based theme. I could reproduce it with Munchies and Meraki.
2. On the Site or Page Editor, add either a Paragraph or Heading block.
3. Add some text and make sure some words are long and/or the font size is big, like 60 or 100px.
4. Check the page on mobile.

What you expected to happen

I expected the long words to be divided into new lines.

What actually happened

Instead, the overflowing text is just being hidden.

Context

Testing and customer report here:

• [ ] 37405915-hc

Platform (Simple, Atomic, or both?)

Simple, Atomic

Theme-specific issue?

This seems to be affecting only FSE themes. On classic themes like Dara, I noticed we have the CSS properties: word-wrap: break-word; or overflow-wrap: break-word;.

Browser, operating system and other notes

No response

Reproducibility

Consistent

Severity

Some (< 50%)

Available workarounds?

Yes, easy to implement

Workaround details

To fix this, the user can add CSS code to their blocks or just reduce the font size.