Twenty Twenty-Two, Site Edit, Group with Background Color Overflows Page Size on Mobile

[joshuanan]

When you add a group block with a background color to a footer template in the full site editor, the group block will overflow the page on a mobile device by a few pixels. For example, on a device that is 360 pixels wide will have approximately 10 pixels of overflow. The offending party is this CSS code:

.wp-site-blocks .alignfull, .wp-site-blocks > .wp-block-group.has-background, .wp-site-blocks > .wp-block-cover, .wp-site-blocks > .wp-block-template-part > .wp-block-group.has-background, .wp-site-blocks > .wp-block-template-part > .wp-block-cover, body > .is-root-container > .wp-block-cover, body > .is-root-container > .wp-block-template-part > .wp-block-group.has-background, body > .is-root-container > .wp-block-template-part > .wp-block-cover, .is-root-container .wp-block[data-align="full"] {
  margin-left: calc(-1 * var(--wp--custom--spacing--outer)) !important;
  margin-right: calc(-1 * var(--wp--custom--spacing--outer)) !important;
  width: unset;
}

Where margin-right is the source of the problem. Turning that style off in my browser's developer console eliminates the extra space.

[karmatosed]

I am struggling to replicate this. It could be that we need more steps though. Could you please provide them?

[karmatosed]

I am going to recommend that we close this for now as I am unable to replicate and we don't have any more information. We can of course reopen this or not progress if we get more details. Thanks everyone.

[karmatosed]

For now, let's close this and move forward if we have more information. Thank you everyone for the collaboration.