Cover block: Big font size heading not responsive

[Robertght]

Steps to reproduce the behavior

This appears to affect only WordPress.com sites as it happens with multiple themes. Basically, the bigger font sizes of headings that are placed in a full width Cover block do not wrap on mobile screens or adjust their font size.
On a self-hosted site, the text wraps around the container. I'm wondering if this is an edge case to consider and if it's ok to report it on the Calypso repo.

Example of the issue:
Editor setup:

(happens only when having very big font sizes with longer words than a few letters)

On some themes, it creates a horizontal scroll as well.

What I expected to happen

To resize the heading or wrap it for smaller screens.

What actually happened

It generated some horizontal scroll or didn't show the entire text.

Context

3830498-zen

Browser / OS version

Chrome/Safari - MacOS Big Surr, iOS

Is this specific to the applied theme? Which one?

Inconsistent across themes.

Does this happen on simple or atomic sites or both?

Tested only on Simple sites and self-hosted sites.

Is there any console output or error text?

No

Level of impact (Does it block purchases? Does it affect more than just one site?)

–

Reproducibility (Consistent, Intermittent) Leave empty for consistent.

Screenshot / Video: If applicable, add screenshots to help explain your problem.

Added above

[jordesign]

This one definitely needs some further testing - to narrow down the instances in which it happens. Generally with headings - if there is a custom font size set - it is an inline style - so by nature it stays big even when the screen is smaller.

[arthur791004]

Actually, I found that some of the themes don't setup word-break for the div block and it uses the default value normal which generated some horizontal scroll or didn't show the entire text. On the other hand, some of the themes setup word-break in the parent block. For example, Independent Publisher 2 add word-break: break-word; to entry-content and heading tag h1 inherits this attribute, so it works without horizontal scrollbar.

/*--------------------------------------------------------------
7.0 - Content
--------------------------------------------------------------*/

.entry-header,
.entry-content,
.entry-summary,
.entry-meta,
.comment-content,
.widget {
	word-wrap: break-word;
}

As @jordesign said, if there is a custom font size set, it's an inline style. So we could just set word-break to wp-block-cover
or wp-block-cover__inner-container class to avoid generating horizontal scroll.

[arthur791004]

I also found that it would make page broken and generate the horizontal scrollbar if the heading (not wrap in the cover) is multi-line text without spaces. Thus, I propose the changes on Gutenberg to fix this problem. See: WordPress/gutenberg#34222

[roo2]

I wasn't able to reproduce this with twenty-twentyone or blank page theme on chrome with cover block or outside of it. Do we have more info about which themes this might affect?

[arthur791004]

@roo2 The problem only happens when you view the post. In editor mode, it works well.