Privacy tool email field stretches past 100% on mobile

[anischarolia]

I have found a issue in page - Wp-admin > Tools > Erase personal data. The Email input's width is not set according to the display width in mobile devices. So, it breaks the page design.

[anischarolia]

patch file for the ticket

[anischarolia]

Screenshot for email input issue

[anischarolia]

Screenshot for solved email input issue

[desrosj]

Thanks for this, @anischarolia. And welcome to Trac!

I am able to reproduce the issue. Your suggested change does fix the issue, but I worry this will have adverse effects elsewhere since #46961.patch​ adds a width property to such a broad declaration. Wondering if the .wp-privacy-request-form input definition would be better to use.

[anischarolia]

updated patch file for better result

[anischarolia]

updated patch file to target the issue efficiently, and avoiding broad declaration.

[afercia]

All the input fields should be "automatically" responsive based on the rules in forms.css.

On large screens, the inputs with the CSS class regular-text have a fixed width of 25em: https://core.trac.wordpress.org/browser/trunk/src/wp-admin/css/forms.css?rev=44895#L378

On small screens, their width is set to 100% but only if they're within a table with the CSS class form-table (not sure why), which is not the case in the Privacy pages: https://core.trac.wordpress.org/browser/trunk/src/wp-admin/css/forms.css?rev=44895#L1452

I'd consider to change the responsive selector .form-table input.regular-text to be just .regular-text but I'd also suggest to test thoroughly across all the admin pages to catch edge cases.

[anischarolia]

updated patch file for targetting just .regular-text in responsive(<=782px) with max-width:100%

[anischarolia]

@afercia yes, targeting just .regular-text in responsive will actually solve the issue. But giving it width:100% will stretch it to full width of display, which is too much for device having display width just before 782px. So I suggest to use max-width:100%, it will help us to keep the input width as it was on large screens until it comes equal to the device screen. And then it will go for 100%. I have updated the patch file named #46961(2).patch. Please review it.

[ianbelanger]

#46961(2).patch​ fixes the issue with no repercussions to other inputs within the admin.

Thanks for the ticket and patch @anischarolia. Marking for commit in 5.2.1

[desrosj]

In 45326:

Privacy: Prevent email field for personal data requests from overflowing.

Props anischarolia, ianbelanger, afercia.
Fixes #46961.

[desrosj]

Reopening for backport.

[desrosj]

In 45327:

Privacy: Prevent email field for personal data requests from overflowing.

Merges [45326] to the 5.2 branch.

Props anischarolia, ianbelanger, afercia.
Fixes #46961.

[garrett-eclipse]

Dropping privacy focus as it's already in the Privacy component.