Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix Fides brand link position on small screens #5572

Merged
merged 2 commits into from
Dec 6, 2024

Conversation

jpople
Copy link
Contributor

@jpople jpople commented Dec 6, 2024

Closes HJ-299

Description Of Changes

Fixes Fides brand link sometimes overlapping page content on small screens. Issue was caused by absolute positioning offsetting from the bottom, but the location of the bottom of the container is positioned differently depending on whether a privacy policy link is present.

Screenshot 2024-12-06 at 11 41 36

To fix, removes the BrandLink component from the universal Layout (calculating vertical position is tricky since it varies depending on page size and contents) and puts it in page content along with the privacy policy link when present.

Code Changes

  • Moved BrandLink from Layout component to be part of page content on all pages
  • Refactors to BrandLink to move commonly-used props inside the component

Steps to Confirm

  1. View privacy center homepage and consent page at all screen sizes
  2. Make sure "powered by Ethyca" link is positioned correctly and doesn't overlap page content

Pre-Merge Checklist

  • Issue requirements met
  • All CI pipelines succeeded
  • CHANGELOG.md updated
  • Followup issues:
    • Followup issues created (include link)
    • 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

Copy link

vercel bot commented Dec 6, 2024

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

1 Skipped Deployment
Name Status Preview Comments Updated (UTC)
fides-plus-nightly ⬜️ Ignored (Inspect) Visit Preview Dec 6, 2024 6:45pm

Copy link

cypress bot commented Dec 6, 2024

fides    Run #11332

Run Properties:  status check passed Passed #11332  •  git commit b65cb2091e ℹ️: Merge b0bf1cfc8ae2729859f47eb9f635456fbda64c05 into 3f0c29639d8d94a706f57122951f...
Project fides
Branch Review refs/pull/5572/merge
Run status status check passed Passed #11332
Run duration 00m 50s
Commit git commit b65cb2091e ℹ️: Merge b0bf1cfc8ae2729859f47eb9f635456fbda64c05 into 3f0c29639d8d94a706f57122951f...
Committer jpople
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 4
View all changes introduced in this branch ↗︎

Copy link
Contributor

@gilluminate gilluminate left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

tested locally and it's looking much better. Still works well when there's a Privacy Policy link

@jpople jpople merged commit 05cf5ef into main Dec 6, 2024
13 checks passed
@jpople jpople deleted the jpople/hj-299/mobile-brand-link-placement branch December 6, 2024 19:03
Copy link

cypress bot commented Dec 6, 2024

fides    Run #11333

Run Properties:  status check passed Passed #11333  •  git commit 05cf5efa6e: Fix Fides brand link position on small screens (#5572)
Project fides
Branch Review main
Run status status check passed Passed #11333
Run duration 00m 48s
Commit git commit 05cf5efa6e: Fix Fides brand link position on small screens (#5572)
Committer jpople
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 4
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