Responsive banner

[allisonking]

Closes #3444

Code Changes

• Add breakpoints for banner width and borders at different sizes
• Slightly edit the banner DOM to have a "container" element so that it's easy to center the banner when it isn't full width

Steps to Confirm

• Spin up the privacy center and visit localhost:3000/fides-js-demo.html and resize your browser

Pre-Merge Checklist

• All CI Pipelines Succeeded
• Documentation:
  • documentation complete, PR opened in fidesdocs
  • documentation issue created in fidesdocs
• Issue Requirements are Met
• Relevant Follow-Up Issues Created
• Update CHANGELOG.md
• For API changes, the Postman collection has been updated

Description Of Changes

Screen.Recording.2023-06-05.at.3.29.29.PM.mov

[cypress]

Passing run #2444 ↗︎

0	4	0	0	0
⚠️ You've recorded test results over your free plan limit. Upgrade your plan to view test results.

Details:

Merge edfe46b into 384301e...
Project: fides	Commit: c71c2708ff ℹ️
Status: Passed	Duration: 00:45 💡
Started: Jun 6, 2023 2:11 PM	Ended: Jun 6, 2023 2:12 PM

_{This comment has been generated by cypress-bot as a result of this project's GitHub integration settings.}

[NevilleS]

Oh, nice! The designs for this actually show that, when not full-width, there should be some spacing between the bottom of the page and the banner. Mockups vary between 51px and 66px which is confusing but we could pick 48px and use that?

[allisonking]

Oh, nice! The designs for this actually show that, when not full-width, there should be some spacing between the bottom of the page and the banner. Mockups vary between 51px and 66px which is confusing but we could pick 48px and use that?

whoops good catch, didn't notice that!

[allisonking]

Added 48px spacing between bottom and the banner:

Screen.Recording.2023-06-06.at.9.54.06.AM.mov