Blui 5303 vertical view fix

[JeffGreiner-eaton]

Fixes https://github.com/etn-ccis/blui-react-component-library/issues/701.

Changes proposed in this Pull Request:

• use @brightlayer-ui/react-doc-components": "^1.0.0-alpha.12" the PlaygroundPreview.component.tsx box styles was updated with pb: {xs: 9, md: 0} }
• add styles to stack and box components for drawer playground example
• add margin to appBar playground example

Screenshots / Screen Recording (if applicable)

-

To Test:

--Drawer

• https://blui-react-docs--pr853-bug-blui-5303-vertic-mob6rp2s.web.app/components/drawer/playground
• Resize window vertical and horizontal while viewing drawer playground
• Change drawer variants and repeat window sizing

--Appbar

• https://blui-react-docs--pr853-bug-blui-5303-vertic-mob6rp2s.web.app/components/app-bar/playground
• Resize window vertical and horizontal while viewing app bar playground

Any specific feedback you are looking for?

-

[codecov[bot]]

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Comparison is base (a86f67f) 84.03% compared to head (3286ea4) 84.03%.

Additional details and impacted files

```diff @@ Coverage Diff @@ ## dev #853 +/- ## ======================================= Coverage 84.03% 84.03% ======================================= Files 58 58 Lines 1234 1234 Branches 158 158 ======================================= Hits 1037 1037 Misses 98 98 Partials 99 99 ``` | [Flag](https://app.codecov.io/gh/etn-ccis/blui-react-component-library/pull/853/flags?src=pr&el=flags&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=etn-ccis) | Coverage Δ | | |---|---|---| | [unittests](https://app.codecov.io/gh/etn-ccis/blui-react-component-library/pull/853/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=etn-ccis) | `84.03% <ø> (ø)` | | Flags with carried forward coverage won't be shown. [Click here](https://docs.codecov.io/docs/carryforward-flags?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=etn-ccis#carryforward-flags-in-the-pull-request-comment) to find out more.

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

[github-actions[bot]]

Visit the preview URL for this PR (updated for commit 3286ea4):

https://blui-react-docs--pr853-bug-blui-5303-vertic-mob6rp2s.web.app

_{(expires Fri, 16 Feb 2024 17:32:25 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 34d39fa5aab0ea0cf95074e8e76f68829e7a8c65}

[JeffGreiner-eaton]

• original issue in dev branch and master

https://github.com/etn-ccis/blui-react-component-library/assets/119693939/bae8d250-fc5a-4a3a-9510-9f64e6e6d06f

[JeffGreiner-eaton]

I kept variant as expanded and resize the browser. It overlaps on Props and Code section.

check to see if Docs package.json has "@brightlayer-ui/react-doc-components": "^1.0.0-alpha.12"

This is what I see.

https://github.com/etn-ccis/blui-react-component-library/assets/119693939/0efb99fb-58f0-48fe-88d3-8ca38983e48d

[surajeaton]

I kept variant as expanded and resize the browser. It overlaps on Props and Code section.

check to see if Docs package.json has "@brightlayer-ui/react-doc-components": "^1.0.0-alpha.12"

This is what I see.

appbar.mov

Forgot to run yarn in docs.