Dorna, Hari, etc: Comment form labels overlap on mobile

[supernovia]

Quick summary

The labels in the Leave a Reply area overlap on mobile devices.

Steps to reproduce

1. Start with a site that has posts.
2. Enable Dorna.
3. Use a mobile phone to find a post, then scroll down and look at the comments area.

What you expected to happen

I want to be able to see the different fields of the reply box, like this does if I uncheck the offending CSS:

What actually happened

I get a jumble of text.

Context

Customer report here:
https://wordpress.com/forums/topic/overlapping-text-problem-with-leave-a-reply-on-apple-mobile-phone/

Simple, Atomic or both?

No response

Theme-specific issue?

Dorna, Hari, likely related themes

Browser, operating system and other notes

I've tested on my phone (iPhone SE) as well as with Chrome's inspect element. The user who reported this also uses an iPhone.

Reproducibility

Consistent

Severity

Some (< 50%)

Available workarounds?

No and the platform is unusable

Workaround details

This CSS snippet would work, but as we're discouraged from handing out snippet fixes, we'll need to say there is not a workaround.

.wp-block-post-comments form>* {
    grid-area: unset;
}

[Robertght]

Thank you @supernovia ! I believe this may be somewhat related:

#5880

cc @jffng for a second look

[jamiepalatnik]

Another report: 22366560-hc

Winkel theme. I can recreate on a test site.

[jerrysarcastic]

Also reported in https://wordpress.com/forums/topic/overlapping-text-at-comment-section

View when logged in as site admin:

When viewed by logged-out site visitor

[Jaykame]

5250435-zd

User on this site also reported this happening on their form comment labels.

[KirkwallDay]

5250435-zd

User on this site also reported this happening on their form comment labels.

In this instance, the bug is due to the Post Comments block in FSE, and seems to only occur on AMP pages, which means the CSS fix above wouldn't work here. I did advise them to try replacing it with the more updated Comments block as the Post Comments block is depreciated. I'll reply back here when they do this if it helps or not.

[sajmes]

5289121-zd-woothemes

Replacing Post Comments block with Comments block appears to have resolved it when I tested.

[crazytonyli]

This issue is also reported in 5367819-zd-woothemes. The user is using Russell theme though.

[pbking]

Closing this as fixed. Blockbase 3 ships with the Comments Block which fixes this problem for Blockbase and all of the child themes.