Update fides.css to vary width based on tcf

[Kelsey-Ethyca]

Closes PROD-1316

Description Of Changes

Update fides.css; tcf banner will be full width and non-tcf will be no greater than 75% width

Steps to Confirm

• run fidesplus backend / fides frontend with TCF enabled and geo location enabled
• add systems with data uses
• go to privacy center with a location that requires TCF (ex http://localhost:3001/fides-js-demo.html?geolocation=fr-id)
• verify banner is not floating off bottom of screen and is full width
• go to privacy center with a location that does not use TCF (ex http://localhost:3001/fides-js-demo.html?geolocation=us-ca)
• verify banner is floating off bottom of screen and is <75% width

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

UAT

Screen.Recording.2023-11-03.at.10.06.37.AM.mov

[cypress]

Passing run #5018 ↗︎

0

4

0

0

0

Details:

Merge f9b32c3 into 2d0d7e4...
Project: fides	Commit: 3a946862c3 ℹ️
Status: Passed	Duration: 00:55 💡
Started: Nov 3, 2023 8:54 PM	Ended: Nov 3, 2023 8:55 PM

Review all test suite changes for PR #4381 ↗︎

[galvana]

I noticed two issues, the consent banner has padding on the right and bottom from overflow: scroll instead of overflow:auto

Also, the footer on the TCF banner is no longer fixed

[galvana]

This fixes the original issue but there are some regressions in the consent/TCF modals

[galvana]

Thanks for fixing the regressions, looks good to me!

[Kelsey-Ethyca]

UAT with Adrian

• TCF banner not embedded
• TCF banner embedded
• TCF modal not embedded
• TCF modal embedded
• notice (non TCF) banner not embedded
• notice banner embedded
• notice modal not embedded
• notice modal embedded

Screen.Recording.2023-11-03.at.12.59.56.PM.mov