Refactor notice-bar positioning in Keycloak Vue app

[davinotdavid]

What changed?

• Added message-bar component to the BaseTemplate and removed all the duplicated message-bars from all the views in the Keycloak vue app
• Updated the padding of the panel-contents section to be horizontally even (6rem). Approved by the design team!
• Fixed the logo spanning the whole width as a container causing potentially misclicks
• Fixed the "Forgot Password" link spanning the whole width as a container causing potentially misclicks
• Removed duplicated styles for .notice-bar and .logo-link
• Removed the max-height in the panel so that it can grow according to its content instead of overflowing. This is perhaps a bit controversial as the left side orb graphic grows a bit when a layout shift happens (I know @MelissaAutumn changed this purposely before). IMHO it is less jarring to have it grow rather than overflowing but can put it back if there's a counter argument for it.

Note

Since this updates all the Keycloak app notices, please peruse the app to help test. I did trigger some of them and they look fine for me though!

Why?

• To better approximate the Zeplin designs: https://zpl.io/6JQPMYy. Please note that there's some deviation from the input itself but that's on purpose as we still allow folks to sign up with their recovery email at this moment.
• Reduce duplicated code

Limitations and Notes

Applicable Issues

Fixes #1036
Fixes #1021

Screenshots

[davinotdavid]

Failed tests are unrelated btw!

[rwood-moz]

Failed tests are unrelated btw!

FYI Earlier I filed #1058 for that, contact tests failing when run on PRs/local stack.

[MelissaAutumn]

I'm not at my work laptop atm, but here's an initial review.