ENG-2699: CSS fixes for TCF embedded consent in mobile SDK

[thabofletcher]

Ticket ENG-2699

Description Of Changes

CSS fixes for TCF embedded consent in mobile SDK WebViews to support both dismissable and non-dismissable banner_and_modal experiences.

Code Changes

• clients/privacy-center/public/embedded-consent.html:
  • Fix dismissable view on mobile: The default dismissable overlay CSS was breaking layout in embedded WebViews. Mobile SDKs need to handle dismissable behavior in native code (not CSS), so these styles ensure the embedded banner renders correctly regardless of the dismissable setting.
  • Fix layout for multiple breakpoints: Added responsive CSS for optimal mobile experience at both phone (<768px) and tablet (>=768px) breakpoints. The banner now fills the viewport with a sticky footer for action buttons, and content scrolls properly when it overflows.

Steps to Confirm

1. You need to have a TCF notice avaialable
2. Load embedded consent page at embedded-consent.html?geolocation=de&property_id=FDS-C33DQM (any TCF region, and your property ID instead)
3. Test with both dismissable=true and dismissable=false experience configs (if possible, reporting client uses dismissable=true so that is the more critical test
4. Verify layout works correctly on mobile viewport (width < 768px)
5. Verify layout works correctly on tablet viewport (width >= 768px)
6. Verify content scrolls when text overflows, buttons stay fixed at bottom (min browser height)

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
  • Updates unreleased work already in Changelog, no new entry necessary
• UX feedback:
  • No UX review needed
• Followup issues:
  • No followup issues
• Database migrations:
  • No migrations
• Documentation:
  • No documentation updates required

[vercel]

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

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
fides-plus-nightly	Ignored	Preview	Feb 27, 2026 4:12pm
fides-privacy-center	Ignored		Feb 27, 2026 4:12pm

[greptile-apps]

Greptile Summary

Implements CSS fixes for TCF embedded consent in mobile SDK WebViews to support both dismissable and non-dismissable banner_and_modal experiences. The changes add a comprehensive flexbox layout system with sticky footer, responsive breakpoints for phone (<768px) and tablet (≥768px) viewports, and overflow handling for scrollable content.

Key changes:

• Added margin: 0 body reset for proper WebView layout
• Implemented flexbox layout for TCF banner with sticky footer and scrollable content area
• Added responsive breakpoint at 768px for tablet/iPad with adjusted padding
• Hidden close button in embedded mode (dismissable behavior handled by native SDK code)
• Fixed modal overflow issues on second screen with proper height constraints

Critical issue: The changelog description only mentions "margin reset" but doesn't capture the full scope of these CSS changes, which could mislead future developers reviewing the change history.

Confidence Score: 3/5

• This PR is safe to merge after updating the changelog description to accurately reflect all changes
• Score reflects one critical issue: the changelog description is significantly incomplete and misleading. The CSS implementation itself appears solid and functional for mobile SDK WebViews. The extensive use of !important declarations is concerning but likely necessary for overriding third-party library styles. Some hardcoded values could be extracted as CSS variables for better maintainability, but this is a minor style issue.
• Pay close attention to changelog/7513.yaml - the description must be updated to accurately reflect the full scope of CSS changes before merging

Important Files Changed

Filename	Overview
changelog/7513.yaml	Changelog entry with incomplete description - only mentions margin reset but PR includes extensive CSS changes for TCF overlay layout, responsive breakpoints, and modal fixes
clients/privacy-center/public/embedded-consent.html	Added comprehensive CSS fixes for TCF embedded consent with flexbox layout, sticky footer, responsive breakpoints, and overflow handling - some hardcoded values could use CSS variables

_{Last reviewed commit: 9d22e6a}

[greptile-apps]

_{2 files reviewed, 3 comments}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

changelog doesn't capture full scope of changes - it only mentions margin reset but PR includes TCF overlay flexbox layout, sticky footer, responsive breakpoints (768px), close button hiding, and modal overflow fixes

Suggested change

	description: Added margin reset to embedded consent page body for proper mobile SDK WebView layout
	description: CSS fixes for TCF embedded consent in mobile SDK WebViews supporting dismissable and non-dismissable banner_and_modal experiences across phone and tablet breakpoints

_{Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!}