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:
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.
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