Modal css fixes

[allisonking]

Closes #3423

Code Changes

• Fix padding issues. This was sneaky because browsers include their own margins on certain elements by default. This didn't become apparent until using it in something like a real next app which probably has a css reset to undo all browser defaults.
• Unnest CSS selectors. It turns out this isn't widely supported, resulting in much of the modal CSS not rendering at all in firefox and safari!

Steps to Confirm

• Follow the steps in https://github.com/ethyca/fidesplus/pull/913 and take a look at the modal in the cookie house app
• Take a look in Firefox and Safari too

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

Chrome:

Firefox:

Safari:

Note that the borders are straight because we only have the full width version of the banner right now. We haven't implemented break points for the banner yet, but when it gets smaller, the border should start to curve (see this slack convo)

A note on CSS resets:

Apps can normally do something like

* {
  margin: 0
}

We can't do that, or else we might mess up the host app's CSS! we could do

#fides-overlay {
  * {
    margin: 0
  }
}

but that's nested CSS so isn't widely supported. the usual conversion of

#fides-overlay * {
  margin: 0
}

doesn't quite work because of CSS specificity rules I haven't quite wrapped my head around. It does apply that margin:0, but then our subsequent css doesn't overwrite it properly. I opted not to look into this too much, but we may want to consider adding a css reset to our fides demo page so that styling issues like this don't come up again (assuming we develop against the demo page)

[cypress]

Passing run #2355 ↗︎

0

4

0

0

0

Details:

Merge 88d90f2 into c3b9e61...
Project: fides	Commit: 75c43d6b38 ℹ️
Status: Passed	Duration: 01:14 💡
Started: Jun 2, 2023 4:35 PM	Ended: Jun 2, 2023 4:36 PM

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

[NevilleS]

This looks great to me, thanks. The only issue here is the use of Inter which isn't a standard browser font...

Assuming y'all figure out something for that, let's merge this in

[NevilleS]

Thanks 👍