[bbt-52/53]UI styles and sticky preview

[squarewave17]

Description

This PR addresses 52 and 53 - combined together as they are both uI related

Change Log

• Added a background color of #F6F7F7 to background
• Changed how width is set at desktop so that 20px margin can be maintained between
• Made the themer preview sticky so it remains is view while editing parameters

###Note: Adding sticky to the preview poses a new issue which can be found here

Steps to test

• View the UI and ensure that the background color is correct
• ensure sticky behaviour behaves as expected
• View the UI on both your mac and wide monitor to ensure the 20px gap is there in deskop and scales correctly. The responsive viewports should resize as normal

Screenshots/Videos

Video

Checklist:

• [ x] My code follows the style guidelines of this project
• [ x] I have performed a self-review of my own code
• [ x] I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• [ x] My changes generate no new warnings
• Any dependent changes have been merged and published in downstream modules

[g-elwell]

Thanks for the contribution @squarewave17 !

This works well, I've added a tiny inline comment about CSS linting 😅

I had some thoughts whether we should contain the block content inside the preview, but I think this would be a separate issue as it would need to account for full vs content vs wide width blocks and how we represent them within the preview. So, I'm happy to move ahead with this once the linting is sorted and address those issues later on.

[squarewave17]

Thanks for the contribution @squarewave17 !

This works well, I've added a tiny inline comment about CSS linting 😅

I had some thoughts whether we should contain the block content inside the preview, but I think this would be a separate issue as it would need to account for full vs content vs wide width blocks and how we represent them within the preview. So, I'm happy to move ahead with this once the linting is sorted and address those issues later on.

Yeah I see what you mean. Maybe just a little padding on the preview window would be an interim solution?

[g-elwell]

Thanks for the contribution @squarewave17 !
This works well, I've added a tiny inline comment about CSS linting 😅
I had some thoughts whether we should contain the block content inside the preview, but I think this would be a separate issue as it would need to account for full vs content vs wide width blocks and how we represent them within the preview. So, I'm happy to move ahead with this once the linting is sorted and address those issues later on.

Yeah I see what you mean. Maybe just a little padding on the preview window would be an interim solution?

Yeah that would be an improvement, I'm happy to leave it for now though and will pop an issue in for us to address separately so we can go ahead and merge this PR

[g-elwell]

Work's great, thanks @squarewave17 !