Adds a block formatting context to the preview div so that any floate…

[roblevintennis]

Addresses issue: #772

@sapegin I looked for a place to add a spec e.g. src/rsg-components/Playground/Playground.spec.js but I didn't see anything else asserting on CSS things in there so I deemed this not a thing that needed specs. Please advise if otherwise. That said, Here are some screenshots to make this PR crystal clear…

Nothing broke:

Proof .. floated button gets contained (note I added the float: right manually in devtools):

---

Here's the preview div with block formatting context rules applied:

---

Lmk if there's anything else you'd like done here. Thanks

[sapegin]

Thanks!

[sapegin]

I'd add a comment that it's a clearfix and why we need it here, otherwise these two lines will be eventually removed during refactoring ;-)

[roblevintennis]

Ah ok, cool will do

[sapegin]

I didn't see anything else asserting on CSS things

For that we’ll need something like Cypress which would be awesome ;-)

[roblevintennis]

@sapegin I added comments in a34b15b ... not sure what your line length rules are but I couldn't think of any shorter way to express .. lmk if it's making lines too long 😋 I could always remove the "block formatting context" since contain floats is self evident. Just lmk

[sapegin]

I think it requires too much knowledge to understand and more about how then why. I’d add more generic comment on top of these two lines, explaining what’s the problem this code is solving.

[roblevintennis]

well taken ... I tried to shorten comment and speak more to the issue being solved and not the mechanics of fix per your suggestion. Hopefully what you're looking for but lmk if you have something better :)

[sapegin]

Thanks, merged!

[roblevintennis]

👍 thank you!