Skip to content

fix border width to respect variable#6097

Merged
gilluminate merged 2 commits intomainfrom
gill/LJ-725/janus-border-width-variable
Apr 29, 2025
Merged

fix border width to respect variable#6097
gilluminate merged 2 commits intomainfrom
gill/LJ-725/janus-border-width-variable

Conversation

@gilluminate
Copy link
Copy Markdown
Contributor

@gilluminate gilluminate commented Apr 29, 2025

Closes LJ-725

Description Of Changes

When the --fides-overlay-container-border-width css variable is set, it doesn't apply to the banner as expected, only the modal.

It does however get applied to the mobile version of the banner, which is where the bug stems from. When the responsive version of the banner was updated, this width was hard coded instead of using the variable.

Fixing this should be low risk in the ecosystem of custom css because if anyone is trying to use that variable to adjust the width, they are likely not being successful and using something hard coded and that will STILL APPLY when this variable gets added to the responsive styling, but it has been marked as high-risk This issue suggests changes that have a high-probability of breaking existing code in the change log just in case.

Code Changes

  • replaced hard coded value with variable

Steps to Confirm

  1. Enable the default Canada Banner + Modal experience in Admin UI
  2. Visit the privacy center demo page /fides-js-demo.html?geolocation=ca-qu
  3. Border should be normal 1px
  4. Paste the following CSS into the <head> of fides-js-demo.html
<style>
  :root {
    --fides-overlay-container-border-width: 10px;
  }
</style>
  1. Reload the demo page /fides-js-demo.html?geolocation=ca-qu
  2. Both the banner and the modal should respect the new variable value

Pre-Merge Checklist

  • Issue requirements met
  • All CI pipelines succeeded
  • CHANGELOG.md updated
    • Add a db-migration This indicates that a change includes a database migration label to the entry if your change includes a DB migration
    • Add a high-risk This issue suggests changes that have a high-probability of breaking existing code label to the entry if your change includes a high-risk change (i.e. potential for performance impact or unexpected regression) that should be flagged
    • Updates unreleased work already in Changelog, no new entry necessary
  • Followup issues:
    • Followup issues created
    • No followup issues
  • Database migrations:
    • Ensure that your downrev is up to date with the latest revision on main
    • Ensure that your downgrade() migration is correct and works
      • If a downgrade migration is not possible for this change, please call this out in the PR description!
    • No migrations
  • Documentation:
    • Documentation complete, PR opened in fidesdocs
    • Documentation issue created in fidesdocs
    • If there are any new client scopes created as part of the pull request, remember to update public-facing documentation that references our scope registry
    • No documentation updates required

@vercel
Copy link
Copy Markdown
Contributor

vercel Bot commented Apr 29, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
fides-privacy-center ✅ Ready (Inspect) Visit Preview 💬 Add feedback Apr 29, 2025 6:16pm
1 Skipped Deployment
Name Status Preview Comments Updated (UTC)
fides-plus-nightly ⬜️ Ignored (Inspect) Visit Preview Apr 29, 2025 6:16pm

@gilluminate gilluminate merged commit ed1a2da into main Apr 29, 2025
17 checks passed
@gilluminate gilluminate deleted the gill/LJ-725/janus-border-width-variable branch April 29, 2025 19:17
@cypress
Copy link
Copy Markdown

cypress Bot commented Apr 29, 2025

fides    Run #12883

Run Properties:  status check passed Passed #12883  •  git commit ed1a2dadaf: fix border width to respect variable (#6097)
Project fides
Branch Review main
Run status status check passed Passed #12883
Run duration 00m 54s
Commit git commit ed1a2dadaf: fix border width to respect variable (#6097)
Committer Jason Gill
View all properties for this run ↗︎

Test results
Tests that failed  Failures 0
Tests that were flaky  Flaky 0
Tests that did not run due to a developer annotating a test with .skip  Pending 0
Tests that did not run due to a failure in a mocha hook  Skipped 0
Tests that passed  Passing 5
⚠️ You've recorded test results over your free plan limit.
Upgrade your plan to view test results.
View all changes introduced in this branch ↗︎

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants