Handle really long values in request manager

[lucanovera]

Ticket ENG-1862

Description Of Changes

Add ellipsis to identity/custom fields displaying in the new request manager page to handle really long values.

Code Changes

• Added ellipsis with tooltip to LabeledText (used for identity and custom fields)
• Gap adjustments for better styling

Steps to Confirm

1. Go to the privacy center and submit a new request and use really long values for custom fields without breaking points like this b35f9f9a7fa84c81870480f62443b345dfe19b970b0f4114b3bd5f4b88a1b94f50a7639f48a1426fbc6c87f5b76a3db8
   You can also try a really long email name too.
2. Login to admin-ui
3. Go to /settings/about and enable the "Privacy request v2" feature flag
4. Go to the Privacy Request > Request Manager (new) option
5. Check the really long values are cutoff with ellipsis
6. Check that you can hover the ellipsis to see a tooltip with the full text
7. Check generally that the screen handles all listed values without overlapping elements

Screenshot

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
• UX feedback:
  • All UX related changes have been reviewed by a designer
  • No UX review needed
• 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]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
fides-plus-nightly	Ready	Preview	Comment	Nov 5, 2025 2:48pm

1 Skipped Deployment

Project	Deployment	Preview	Comments	Updated (UTC)
fides-privacy-center	Ignored			Nov 5, 2025 2:48pm

[greptile-apps]

Greptile Overview

Greptile Summary

Added ellipsis with tooltip to LabeledText component to handle overflow of long identity and custom field values in the request manager.

• Added ellipsis={{ tooltip: true }} and !max-w-60 class to Text component in LabeledText.tsx to truncate long values with hover tooltip
• Changed gap props to use semantic values (gap="small") for consistency
• Updated ListItem.tsx to use Tailwind gap-x-3 gap-y-2 classes for different horizontal and vertical spacing

Confidence Score: 4/5

• This PR is safe to merge with minimal risk
• The changes are straightforward UI improvements for handling text overflow. One minor style guide deviation was noted where Tailwind CSS classes were used instead of Ant Design's native gap tuple syntax.
• No files require special attention - the changes are simple styling improvements

Important Files Changed

File Analysis

Filename	Score	Overview
clients/admin-ui/src/features/privacy-requests/dashboard/list-item/components/LabeledText.tsx	5/5	Added ellipsis with tooltip and max-width constraint to handle long text values. Changed gap from numeric to semantic value.
clients/admin-ui/src/features/privacy-requests/dashboard/list-item/ListItem.tsx	4/5	Replaced Ant Design Flex gap prop with Tailwind CSS classes for different horizontal and vertical gaps, which may violate the style guide preference for using Ant Design components.

_{2 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

style: Ant Design's Flex gap prop supports tuple values like gap={[12, 8]} for different horizontal and vertical spacing. Consider using gap={[12, 8]} instead of Tailwind classes to align with the style guide preference for Ant Design components.

Context Used: Rule from dashboard - Use Ant Design's Flex component before resorting to Tailwind CSS flexbox classes for layout. (source)

[lucanovera]

It would be nice if it supported separate values for horizontal/vertical gaps, but it doesn't. From Ant's official docs:
gap: small | middle | large | string | number |  

[speaker-ender]

Tested locally and looks good!