Horizontal scrollbars are appearing in story editor

[swissspidy]

[westonruter]

This happens particularly on the first page:

On the second page, the scrollbar goes away:

[swissspidy]

As an explanation, that the width of 1110 is coming from the width of the wrapping #amp-story-editor element. #amp-story-editor > .editor-block-list__layout then uses flexbox to lay out the inner blocks horizontally.

[westonruter]

Can we just add overflow:hidden on the #amp-story-editor? That seems to fix the problem for me.

[swissspidy]

As mentioned on Slack, a simple overflow: hidden there is not going to work. This will cut off elements all over the place. Quick example:

[westonruter]

This is the only place I see an element being cut off when I add overflow:hidden to #amp-story-editor:

Which seems just fine.

[swissspidy]

Note that .amp-story-editor-carousel-navigation needs more top margin there, at least margin-top: 7em;. Or ideally the elements above would automatically push it down. 🤷‍♂

[westonruter]

@swissspidy in regards to the CTA block on the first page, what if the warning were displayed instead of the block? Or above the block?

[swissspidy]

That works too. Still think the margin needs to be increased a bit though.

[csossi]

Verified in QA