Skip to content

Conversation

lucanovera
Copy link
Contributor

@lucanovera lucanovera commented Jul 25, 2025

Description Of Changes

Fix issue where very long title cause an horizontal scroll in the privacy request detail page.

Code Changes

  • Removed headerLeft wrapper as it was not needed
  • Adjusted styling for Privacy Request page
  • Adjusted styling for activity entry, ensuring no wrap and that all children don't shrink
  • Adjusted styling for activity entry title, removing arbitrary 33% max width in favor of displaying full width and shrink with ellipsis when needed
  • Adjusted styling for activity entry timestamp, allowing ellipsis in smaller screens

Steps to Confirm

  1. Visit https://fides-plus-nightly-git-eng-1042-privacy-request-d-f68fb7-ethyca.vercel.app/privacy-requests/pri_a66acfbd-d67a-4aa9-b451-62a0b8da3f1d use nightly build credentials for login
  2. Using responsive mode in the browser, check that across multiple desktop screen sizes:
    a. A horizontal scroll should never occur
    b. when the entry has a short title, every part of the entry (author, title, date, tag) displays one after the other, leaving empty space to the right, like this:
Captura de pantalla 2025-07-25 a la(s) 6 09 46 p  m c. when the entry has a really long title, every part of the entry (author, title, date, tag) displays one after the other completely filling the entire width of the activity tab. the title shrinks and expands to display as much text as possible before showing the ellipsis (...) like this: Captura de pantalla 2025-07-25 a la(s) 6 09 58 p  m

(Local testing quick alternative)
Testing locally, the issue can be reproduced by editing the ActivityTimelineEntry.tsx file and repeating the {title} a bunch of times or setting it to a really long string.

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

Copy link

vercel bot commented Jul 25, 2025

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

2 Skipped Deployments
Name Status Preview Comments Updated (UTC)
fides-plus-nightly ⬜️ Ignored (Inspect) Visit Preview Jul 28, 2025 9:32pm
fides-privacy-center ⬜️ Ignored (Inspect) Jul 28, 2025 9:32pm

…request-detail-page-layout-issue-causes-horizontal-scroll
Copy link
Contributor

@jpople jpople left a comment

Choose a reason for hiding this comment

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

Tested in Vercel preview environment, looking good-- one small question/nitpick, at smallish screen sizes the date string is also cut off. Don't think this is a dealbreaker technically because the tooltip still works, but do you think there's a better way to handle?

Screenshot 2025-07-28 at 14 46 55

@lucanovera
Copy link
Contributor Author

Tested in Vercel preview environment, looking good-- one small question/nitpick, at smallish screen sizes the date string is also cut off. Don't think this is a dealbreaker technically because the tooltip still works, but do you think there's a better way to handle?

Screenshot 2025-07-28 at 14 46 55

Thanks for the review! I added that date string ellipsis at the last minute because I noticed even without a title there's not enough space for the user + date string + tag + show logs. But you're right, it doesn't look good and having 2 ellipsis next to each other makes their width incosistent.
I've pushed a change now so that if we're below 1280px, the entries display in 3 lines: the author, then the title (with ellipsis if it doesn't fit in a line) and last the full datestring + tag. Let me know what you think.

@lucanovera
Copy link
Contributor Author

Adding some pics for reference:
Screens over 1280px:
Screen Shot 2025-07-28 at 17 36 48

Screens below 1280px:
Screen Shot 2025-07-28 at 17 37 35

Copy link
Contributor

@jpople jpople left a comment

Choose a reason for hiding this comment

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

Looks great, thanks for the update!

@lucanovera lucanovera merged commit bffb293 into main Jul 28, 2025
23 of 24 checks passed
@lucanovera lucanovera deleted the ENG-1042-Privacy-request-detail-page-layout-issue-causes-horizontal-scroll branch July 28, 2025 22:03
Copy link

cypress bot commented Jul 28, 2025

fides    Run #13169

Run Properties:  status check passed Passed #13169  •  git commit bffb293678: Fix privacy request detail page layout issues with long titles (#6389)
Project fides
Branch Review main
Run status status check passed Passed #13169
Run duration 00m 57s
Commit git commit bffb293678: Fix privacy request detail page layout issues with long titles (#6389)
Committer Lucano Vera
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