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	Mar 3, 2026 7:09pm
fides-privacy-center	Ignored		Mar 3, 2026 7:09pm

[greptile-apps]

Greptile Summary

This PR adds CSS overrides to embedded-consent.html to fix layout issues for TCF banner_and_modal experiences in mobile SDK WebViews. The changes include:

• body { margin: 0 } removes default browser margins
• .fides-banner.fides-embedded is made a 100vh flex container with column layout
• .fides-close-button is hidden (delegating dismissal to native SDK code)
• Content scrolls via #fides-banner-inner-container with overflow-y: auto while button groups remain fixed
• Responsive breakpoints at 768px for optimal mobile and tablet layouts
• #fides-overlay-wrapper gets flex layout for the modal second screen

The changes are scoped to CSS in a single static HTML file used exclusively for embedded mobile SDK WebViews. No JavaScript logic or data handling is modified. The layout fixes are straightforward CSS adjustments with no complex interactions.

Confidence Score: 5/5

• Safe to merge — CSS-only changes to a static HTML file with no logic or data modifications.
• This PR modifies only embedded CSS in a single HTML file used exclusively for mobile SDK WebViews. No JavaScript logic, routing, data handling, or external dependencies are affected. The changes are straightforward flexbox and layout adjustments that safely implement the desired responsive behavior for both dismissable and non-dismissable banner experiences. The changelog accurately describes the fix at an appropriate level of detail.
• No files require special attention

Important Files Changed

Filename	Overview
clients/privacy-center/public/embedded-consent.html	CSS-only changes adding responsive flexbox layout for TCF embedded consent in mobile WebViews. Includes fixes for viewport-filling banner with sticky footer, close button hiding, scrollable content, and responsive breakpoints at 768px. No logic changes or data handling modifications.
changelog/7513.yaml	Changelog entry accurately describes the high-level fix for embedded consent layout in mobile SDK WebViews. Appropriate level of detail for a changelog entry.

_{Last reviewed commit: b5638cd}

[greptile-apps]

_{2 files reviewed, 3 comments}

_{Edit Code Review Agent Settings | Greptile}

[thabofletcher]

@greptileai