Improve responsive styles in privacy request detail page #6437

lucanovera · 2025-08-08T15:45:46Z

Description Of Changes

Improve responsive styles in privacy request detail page by collapsing the date into a clock icon with tooltip.

Code Changes

Remove styles for previous behavior of wrapping into 3 lines
Added clock icon and corresponding tailwind classes for showing/hiding

Steps to Confirm

https://fides-plus-nightly-git-eng-1098-improve-privacy-r-7b09c1-ethyca.vercel.app/privacy-requests/pri_6575ad47-15a1-4138-b1b7-99f7433faa4a

Use link above and login to admin ui (use nightly build credentials)
Using responsive mode in the browser, keep reducing the screen. Check that below 1280px the timestamp collapses into a clock icon and you can hover to see the full timestamp in a tooltip.

Pre-Merge Checklist

vercel · 2025-08-08T15:45:51Z

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

2 Skipped Deployments

Project	Deployment	Preview	Comments	Updated (UTC)
fides-plus-nightly	⬜️ Ignored	Preview		Aug 13, 2025 3:21pm
fides-privacy-center	⬜️ Ignored			Aug 13, 2025 3:21pm

greptile-apps

Greptile Summary

This PR improves responsive design in the privacy request detail page's activity timeline component. The changes implement a mobile-first approach where timestamps are displayed differently based on screen size - full timestamps appear on desktop (xl breakpoint and above), while mobile devices show a compact time icon with a tooltip containing the timestamp.

The implementation adds responsive behavior through Tailwind CSS utility classes and introduces new component imports from the fidesui library (Tooltip and Icons). However, the SCSS changes remove existing responsive breakpoints that previously allowed timeline entries to wrap on smaller screens, forcing a single-line layout across all screen sizes.

These modifications are part of the admin UI's client-side components, specifically targeting the privacy request events and logs functionality. The changes aim to create a more mobile-friendly user experience by optimizing space usage on smaller screens while maintaining full information accessibility through progressive disclosure patterns.

PR Description Notes:

The PR description template is incomplete with placeholder text that needs to be filled in
Missing actual issue reference in "Closes []"
Code changes, confirmation steps, and other sections contain placeholder text

Important Files Changed

Files Changed

Filename	Score	Overview
clients/admin-ui/src/features/privacy-requests/events-and-logs/ActivityTimelineEntry.tsx	4/5	Added responsive timestamp display with mobile icon/tooltip pattern
clients/admin-ui/src/features/privacy-requests/events-and-logs/ActivityTimelineEntry.module.scss	2/5	Removed responsive breakpoints forcing single-line layout that may cause mobile overflow issues

Confidence score: 3/5

This PR has mixed implementation quality with good responsive patterns but potential mobile layout issues
Score reflects well-implemented TypeScript changes but concerning CSS modifications that remove mobile-friendly wrapping behavior
Pay close attention to the SCSS file changes that could cause content overflow on mobile devices

Sequence Diagram

sequenceDiagram
    participant User
    participant Browser
    participant ActivityTimelineEntry
    participant Typography
    participant Tooltip
    participant Icons
    participant Tag
    participant AttachmentDisplay

    User->>Browser: "Views privacy request detail page"
    Browser->>ActivityTimelineEntry: "Renders timeline entry component"
    ActivityTimelineEntry->>ActivityTimelineEntry: "Processes item props (author, title, date, type, etc.)"
    ActivityTimelineEntry->>ActivityTimelineEntry: "Formats date using formatDate()"
    ActivityTimelineEntry->>ActivityTimelineEntry: "Determines if item is clickable based on onClick prop"
    ActivityTimelineEntry->>ActivityTimelineEntry: "Checks for attachments"
    
    alt Desktop view (xl breakpoint)
        ActivityTimelineEntry->>Typography: "Renders timestamp text"
        Typography-->>ActivityTimelineEntry: "Returns formatted timestamp"
    else Mobile view (below xl breakpoint)
        ActivityTimelineEntry->>Tooltip: "Creates tooltip with formatted date"
        ActivityTimelineEntry->>Icons: "Renders Time icon"
        Icons-->>ActivityTimelineEntry: "Returns time icon"
        Tooltip-->>ActivityTimelineEntry: "Returns tooltip with icon"
    end
    
    ActivityTimelineEntry->>Typography: "Renders title with ellipsis and tooltip"
    Typography-->>ActivityTimelineEntry: "Returns title component"
    
    ActivityTimelineEntry->>Tag: "Renders type tag with color"
    Tag-->>ActivityTimelineEntry: "Returns colored tag"
    
    opt Has attachments
        ActivityTimelineEntry->>AttachmentDisplay: "Renders attachment display"
        AttachmentDisplay-->>ActivityTimelineEntry: "Returns attachment component"
    end
    
    alt Item is clickable
        ActivityTimelineEntry->>Browser: "Renders as button element"
    else Item is not clickable  
        ActivityTimelineEntry->>Browser: "Renders as div element"
    end
    
    Browser-->>User: "Displays responsive timeline entry"
    
    opt User hovers over timeline item
        User->>Browser: "Hovers over timeline entry"
        Browser->>ActivityTimelineEntry: "Applies hover styles"
        ActivityTimelineEntry-->>Browser: "Shows border highlight"
        Browser-->>User: "Visual feedback on hover"
    end
    
    opt User clicks clickable timeline item
        User->>Browser: "Clicks timeline entry"
        Browser->>ActivityTimelineEntry: "Triggers onClick handler"
        ActivityTimelineEntry->>ActivityTimelineEntry: "Executes item.onClick()"
    end

_{2 files reviewed, 2 comments}

_{Edit Code Review Bot Settings | Greptile}

greptile-apps · 2025-08-08T15:46:16Z

...nts/admin-ui/src/features/privacy-requests/events-and-logs/ActivityTimelineEntry.module.scss

@@ -53,14 +53,8 @@ $horizontal-padding: 20px;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;


logic: Removing flex-wrap responsive behavior may cause horizontal overflow on mobile devices. The previous wrapping logic helped accommodate smaller screens.

This is intended behavior. We don't support mobile devices on admin-ui. But for smaller screens we only want to collapse the timestamp but keep the entries in 1 line.

greptile-apps · 2025-08-08T15:46:18Z

clients/admin-ui/src/features/privacy-requests/events-and-logs/ActivityTimelineEntry.tsx

+        <div className="hidden xl:block">
+          <Typography.Text
+            className={styles.timestamp}
+            data-testid="activity-timeline-timestamp"
+          >
+            {formattedDate}
+          </Typography.Text>
+        </div>


logic: The data-testid attribute is preserved on desktop but missing on mobile version - this could break tests on smaller screens

This didn't break any tests as we're only testing for the element to be there. I still added a new data-testid for the icon in case we need to use it in the future.

…privacy-request-responsive-styles

lucanovera · 2025-08-13T13:45:34Z

@greptileai re-review

greptile-apps

Greptile Summary

Note: This review covers only the changes made since the last review (commit 92fb98f), not the entire PR.

The recent changes address previous review feedback by adding a new test ID for the mobile clock icon implementation. The developer has added data-testid="activity-timeline-timestamp-icon" to the clock icon component, ensuring test coverage remains intact across both desktop and mobile responsive states. This change maintains testing consistency while preserving the responsive design improvement that collapses timestamps into clock icons with tooltips on screens below 1280px.

The implementation continues to use Tailwind's responsive utilities (xl:block and xl:hidden) to conditionally show either the full timestamp text or the compact clock icon based on screen size. The SCSS changes removing the previous 3-line wrapping behavior remain unchanged, maintaining the cleaner single-line layout approach.

Important Files Changed

Click to expand file changes

Filename	Score	Overview
`clients/admin-ui/src/features/privacy-requests/events-and-logs/ActivityTimelineEntry.tsx`	5/5	Added test ID to mobile clock icon addressing previous review feedback

Confidence score: 5/5

This change is safe to merge with minimal risk as it only adds a missing test identifier
Score reflects a simple, targeted fix that addresses previous testing concerns without introducing new complexity
No files require special attention as this is a straightforward test ID addition

Sequence Diagram

sequenceDiagram
    participant User
    participant Browser
    participant PrivacyRequestPage
    participant ActivityTimelineEntry
    participant ResponsiveLogic
    participant Tooltip

    User->>Browser: "Navigate to privacy request detail page"
    Browser->>PrivacyRequestPage: "Load privacy request detail"
    PrivacyRequestPage->>ActivityTimelineEntry: "Render timeline entries"
    
    ActivityTimelineEntry->>ResponsiveLogic: "Check screen width"
    
    alt Screen width >= 1280px (xl breakpoint)
        ResponsiveLogic->>ActivityTimelineEntry: "Use full timestamp display"
        ActivityTimelineEntry->>Browser: "Show formatted date text"
    else Screen width < 1280px
        ResponsiveLogic->>ActivityTimelineEntry: "Use collapsed timestamp display"
        ActivityTimelineEntry->>Tooltip: "Create tooltip with formatted date"
        ActivityTimelineEntry->>Browser: "Show clock icon"
        User->>Browser: "Hover over clock icon"
        Browser->>Tooltip: "Show tooltip with full timestamp"
        Tooltip->>Browser: "Display formatted date tooltip"
    end
    
    Browser->>User: "Display responsive timeline entry"

_{3 files reviewed, no comments}

_{Edit Code Review Bot Settings | Greptile}

greptile-apps

Greptile Summary

This PR improves the responsive design of the privacy request detail page's activity timeline by replacing the previous 3-line wrapping behavior with a more elegant solution. On screens wider than 1280px (xl breakpoint), timestamps display normally, while on smaller screens they collapse into a clock icon with tooltip functionality. The implementation adds responsive Tailwind classes and imports the necessary Tooltip and Icons components from fidesui. The SCSS changes remove the previous flex-wrap behavior that caused awkward multi-line layouts on mobile devices. This change aligns with modern responsive design patterns where information density is optimized for smaller viewports through progressive disclosure, maintaining accessibility while improving visual hierarchy in the timeline interface.

Important Files Changed

Click to expand

Filename	Score	Overview
`CHANGELOG.md`	5/5	Standard changelog entry documenting UI improvements for smaller screens
`clients/admin-ui/src/features/privacy-requests/events-and-logs/ActivityTimelineEntry.module.scss`	4/5	Removes 3-line wrapping behavior and implements single-line layout with flex-wrap: nowrap
`clients/admin-ui/src/features/privacy-requests/events-and-logs/ActivityTimelineEntry.tsx`	4/5	Implements responsive timestamp display with clock icon and tooltip for mobile devices

Confidence score: 4/5

This PR is safe to merge with minimal risk as it addresses previous reviewer concerns about test compatibility
Score reflects well-implemented responsive design improvements with proper accessibility considerations
No files require special attention as all changes follow established patterns and preserve functionality

Sequence Diagram

sequenceDiagram
    participant User
    participant ActivityTimelineEntry
    participant ResponsiveLogic
    participant TooltipComponent
    participant CSS
    
    User->>ActivityTimelineEntry: "View privacy request timeline"
    ActivityTimelineEntry->>ResponsiveLogic: "Check screen width"
    
    alt Screen width >= 1280px (xl breakpoint)
        ResponsiveLogic->>ActivityTimelineEntry: "Show full timestamp text"
        ActivityTimelineEntry->>CSS: "Apply .hidden xl:block classes"
        CSS->>User: "Display full timestamp"
    else Screen width < 1280px
        ResponsiveLogic->>ActivityTimelineEntry: "Show clock icon only"
        ActivityTimelineEntry->>CSS: "Apply .xl:hidden classes"
        ActivityTimelineEntry->>TooltipComponent: "Create tooltip with full timestamp"
        CSS->>User: "Display clock icon"
        
        User->>TooltipComponent: "Hover over clock icon"
        TooltipComponent->>User: "Show full timestamp in tooltip"
    end
    
    Note over ActivityTimelineEntry: Responsive design collapses timestamp into clock icon below 1280px

_{3 files reviewed, no comments}

_{Edit Code Review Bot Settings | Greptile}

gilluminate

Looks good, works good. Nice improvement!

…styles

cypress · 2025-08-13T15:56:28Z

fides Run #13231

Run Properties: Passed #13231 • 27b0356455: Improve responsive styles in privacy request detail page (#6437)

Project	`fides`
Branch Review	`main`
Run status	`Passed #13231`
Run duration	`00m 53s`
Commit	`27b0356455: Improve responsive styles in privacy request detail page (#6437)`
Committer	`Lucano Vera`
View all properties for this run ↗︎

Test results
Failures	`0`
Flaky	`0`
Pending	`0`
Skipped	`0`
Passing	`5`
View all changes introduced in this branch ↗︎

Improve responsive styles

92fb98f

greptile-apps bot reviewed Aug 8, 2025

View reviewed changes

vercel bot deployed to Preview – fides-plus-nightly August 8, 2025 15:49 View deployment

lucanovera added 3 commits August 13, 2025 10:39

add data-testid

4b1bdcb

update changelog

a284c0f

Merge branch 'main' of github.com:ethyca/fides into ENG-1098-Improve-…

24f53a5

…privacy-request-responsive-styles

lucanovera changed the title ~~Draft: Improve responsive styles in privacy request detail page~~ Improve responsive styles in privacy request detail page Aug 13, 2025

greptile-apps bot reviewed Aug 13, 2025

View reviewed changes

lucanovera requested a review from gilluminate August 13, 2025 13:56

gilluminate approved these changes Aug 13, 2025

View reviewed changes

Merge branch 'main' into ENG-1098-Improve-privacy-request-responsive-…

8e1589d

…styles

lucanovera merged commit 27b0356 into main Aug 13, 2025
19 of 20 checks passed

lucanovera deleted the ENG-1098-Improve-privacy-request-responsive-styles branch August 13, 2025 15:39

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Improve responsive styles in privacy request detail page #6437

Improve responsive styles in privacy request detail page #6437

Uh oh!

lucanovera commented Aug 8, 2025 •

edited

Loading

Uh oh!

vercel bot commented Aug 8, 2025 •

edited

Loading

Uh oh!

greptile-apps bot left a comment

Uh oh!

greptile-apps bot Aug 8, 2025

Uh oh!

lucanovera Aug 13, 2025

Uh oh!

greptile-apps bot Aug 8, 2025

Uh oh!

lucanovera Aug 13, 2025

Uh oh!

lucanovera commented Aug 13, 2025 •

edited

Loading

Uh oh!

greptile-apps bot left a comment

Uh oh!

greptile-apps bot left a comment

Uh oh!

gilluminate left a comment

Uh oh!

Uh oh!

cypress bot commented Aug 13, 2025

Uh oh!

Uh oh!

Improve responsive styles in privacy request detail page #6437

Improve responsive styles in privacy request detail page #6437

Uh oh!

Conversation

lucanovera commented Aug 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description Of Changes

Code Changes

Steps to Confirm

Pre-Merge Checklist

Uh oh!

vercel bot commented Aug 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

greptile-apps bot left a comment

Choose a reason for hiding this comment

Greptile Summary

Important Files Changed

Confidence score: 3/5

Sequence Diagram

Uh oh!

greptile-apps bot Aug 8, 2025

Choose a reason for hiding this comment

Uh oh!

lucanovera Aug 13, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Aug 8, 2025

Choose a reason for hiding this comment

Uh oh!

lucanovera Aug 13, 2025

Choose a reason for hiding this comment

Uh oh!

lucanovera commented Aug 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

greptile-apps bot left a comment

Choose a reason for hiding this comment

Greptile Summary

Important Files Changed

Confidence score: 5/5

Sequence Diagram

Uh oh!

greptile-apps bot left a comment

Choose a reason for hiding this comment

Greptile Summary

Important Files Changed

Confidence score: 4/5

Sequence Diagram

Uh oh!

gilluminate left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

cypress bot commented Aug 13, 2025

fides Run #13231

Uh oh!

Uh oh!

lucanovera commented Aug 8, 2025 •

edited

Loading

vercel bot commented Aug 8, 2025 •

edited

Loading

lucanovera commented Aug 13, 2025 •

edited

Loading