S-page doesn't add space top and bottom

Following the template here, I copy and pasted the code exactly. The screenshot on that page shows space above the first banner and also at the bottom after the last section:

Yet when I copy this into a fresh app, I do not have that.

Am I missing something obvious here?

I’m facing the same issue

Just bumping this if someone can take a look.

Can someone from Shopify take a look at this please?

And advise the best approach to handle adding the space at the top/bottom?

Just noting here, wrapping a polaris web component in a form seems to give it a little bit of extra padding at the top where’ you’d expect the s-page spacing to be , but it’s marginal and obviously not practical for a lot of surfaces.

i.e s-page > s-stack > form > s-table

1 Like

Interestingly, this only happens in an actual UI, not a standalone HTML or react mockup.

This means something in app bridge is causing the issue. For now I have solved this by adding

<s-box padding="small"></s-box>

before my content, but this highlights how the web components are being actively changed and broken in multiple places and need better testing from Shopify. Otherwise they can break the apps we already have deployed and we wouldn’t know without checking the live app daily

Hey @SamR-Shopify (sorry for the tag) are you able to advise on this?