Extra padding in React project UI

[godanny86]

There is a sizeable gap/padding when editing the sample React app in the Site's Editor:

When viewing in Preview or published mode the padding disappears:

I believe this issue originates from the inclusion of a locked responsive grid at the root of the application: http://localhost:4502/content/mysamplespa/en.model.json

{
":items": {
"root": {
"gridClassNames": "aem-Grid aem-Grid--12 aem-Grid--default--12",
"columnCount": 12,
"columnClassNames": {},
":items": {},
":itemsOrder": [],
":type": "wcm/foundation/components/responsivegrid"
}
},
":itemsOrder": [
"root"
],
":children": {},
":hierarchyType": "page",
":path": "/content/mysamplespa/en",
"title": "Root Page My Sample SPA App",
":type": "mysamplespa/components/app"
}

I think* just removing the responsivegrid in the app template structure would avoid this issue. But perhaps there is another way?

[pfauchere]

A "root" container is expected by both the template and page editor. We will probably have to find a fix using the stylesheet

[ittaibaratz]

I ran into this issue too as I noticed my app had a big space at page top in AEM compared to webpack, and the solution I found was to delete the root node in CRX/DE.

If we have to keep the root node, we should check if we can avoid dumping it into the component hierarchy when rendering through AEM. Either way, rendering should be consistent between AEM and the webpack proxy.

[habansal]

We will probably have to find a fix using the stylesheet

Indeed! This issue is not specific to SPA, but a Page editor CSS issue. Issue and fix are tracked internally in AEM via CQ-4259401

cc @pfauchere @samuelmeuli