Docs playground doesn't resize well vertically

[joebochill]

Describe the bug / expected behavior

When you have a short (not tall) screen, the size of the elements causes weird overlapping behavior.

What are the steps to reproduce?

1. Go to https://brightlayer-ui-components.github.io/react/components/app-bar/playground
2. Resize the screen vertically (make it shorter)
3. Observe that the demo area starts to overflow into the code snippets and the header

Screenshots / Screen recording

Code snippet / Link to minimum reproduction example

N/A

Your environment information

N/A

Suggested fix

Look into the min heights set for some of these elements. Consider adding a scrollbar to the demo section as well to avoid overflow. There might also be some z-index issues going on.

Anything else to add

This is not observable on all of the components. It's most noticeable on the taller ones like the drawer and the appbar.