Add margin to bottom and sides for cloud pages

[dizel852]

What

Closes #12780

How

Adding margin to wrapper components

[teallarson]

Nice to get some more elements using SASS and classnames. 🎉

I can't tell from the original screenshot if what you've implemented is what was intended or if Natalie was asking for this green area to be empty (ie: at the bottom of the viewport vs. at the bottom of the page)?

It doesn't look like the margin added to the bottom of the docs panel is acting as expected (I went to add source and picked Github and scrolled down, the margin is not 150px)

[dizel852]

Nice to get some more elements using SASS and classnames. 🎉

I can't tell from the original screenshot if what you've implemented is what was intended or if Natalie was asking for this green area to be empty (ie: at the bottom of the viewport vs. at the bottom of the page)?

It doesn't look like the margin added to the bottom of the docs panel is acting as expected (I went to add source and picked Github and scrolled down, the margin is not 150px)

Yeap, that's right - I didn't add margin to the docs panel since I thought that intercom notification displays on the right side only. Also don't have a chance to test this case. Need someone who can check the docs panel with displayed intercom notification.

@timroes any ideas on how we can invoke the intercom notification? Last time I remember you tried to help by resetting something(don't remember for sure what you intend to reset).

Looks like I need to sign up one more account 😄

[dizel852]

I can't tell from the original screenshot if what you've implemented is what was intended or if Natalie was asking for this green area to be empty (ie: at the bottom of the viewport vs. at the bottom of the page)?

I'm pretty sure the idea was to add the margin to the bottom (last element on the page), not the viewport. It might be will look strange I guess since we always will have empty space in the viewport...

@nataliekwong Do we need to add margin to the bottom(last element on the page) or to the viewport?

[edmundito]

I found a couple of issues while testing:

In the onboarding page, the top gets cut off:

The margin-bottom change is also visible in OSS but should probably be applied in cloud only. isCloudApp() can be used to check this.

[dizel852]

I found a couple of issues while testing:

In the onboarding page, the top gets cut off:

The margin-bottom change is also visible in OSS but should probably be applied in cloud only. isCloudApp() can be used to check this.

Hm, interesting... Will double-check it. Good catch! 👍🏻