[wp-trac] [WordPress Trac] #55404: Twenty Twenty-Two, Site Edit, Group with Background Color Overflows Page Size on Mobile

[WordPress Trac]

#55404: Twenty Twenty-Two, Site Edit, Group with Background Color Overflows Page
Size on Mobile
-------------------------------+-----------------------------
 Reporter:  joshuanan          |      Owner:  (none)
     Type:  defect (bug)       |     Status:  new
 Priority:  normal             |  Milestone:  Awaiting Review
Component:  Formatting         |    Version:  5.9.2
 Severity:  minor              |   Keywords:
  Focuses:  ui, css, template  |
-------------------------------+-----------------------------
 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.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/55404>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform