Twenty Twenty: "Wide line" separator breaks inside columns.

[kjellr]

The "Wide line" separator style in Twenty Twenty breaks outside of its container when placed inside of a column. I expect it would max out at the column width like it does in Twenty Twenty-One or Twenty Nineteen. This happens on the front-end, and also in the editor.

To Reproduce:

1. Add a columns block with a few columns in it.
2. Add a separator block into one of the columns.
3. Set the separator to use the "Wide line" style.
4. Observe the overflow issue.

Screenshots:

(Additionally, the separators don't show up in the preview, but I've seen that happen in many themes, so I don't think it's specific to Twenty Twenty).

Other themes, for reference:

Twenty Twenty-One:

Twenty Nineteen:

---

Tested with Twenty Twenty v1.7
WordPress v5.7.2
Gutenberg v11.0.0

[matthiaspabst]

This also happens without columns. To reproduce the bug it's enough to add a paragraph and a separator with the style "wide".

[sabernhardt]

changing width to 100%

[sabernhardt]

r53459 seems to have fixed the width and overflow in the editor, but that still leaves the front-end.

At 1280 pixels and wider, the separator's width and max-width were both 120rem. One of those needs to be 100%, and I chose to change the width. (The width is already set to 100%, so simply removing the fixed value at the breakpoint is another option.)

[audrasjb]

Before patch: Wide line separators inserted inside columns are overflowing their container

[audrasjb]

After patch: looks better :)

[audrasjb]

Let's commit the suggested patch, using width: 100%. I think it's better for an existing theme to change the value than to remove it completely.

[audrasjb]

In 53475:

Twenty-Twenty: Fix a width/alignement issue on "Wide Line" Separator style variation.

This change fixes an alignement issue on the "Wide Line" Separator style variation on front-end, especially when used inside a column block. It changes the block width value from 120rem to 100% to avoid container overflowing.

Props kjellr, matthiaspabst, sabernhardt, audrasjb.
Fixes #53643.