WordPress.org

Make WordPress Core

Opened 10 months ago

Closed 9 months ago

#46961 closed defect (bug) (fixed)

Privacy tool email field stretches past 100% on mobile

Reported by: anischarolia Owned by: desrosj
Milestone: 5.2.1 Priority: normal
Severity: minor Version: 4.9.6
Component: Privacy Keywords: has-patch has-screenshots fixed-major
Focuses: ui, administration, privacy Cc:

Description

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.

Attachments (6)

#46961.patch (349 bytes) - added by anischarolia 10 months ago.
patch file for the ticket
email-input-issue.jpg (65.9 KB) - added by anischarolia 10 months ago.
Screenshot for email input issue
email-input-issue-solved.jpg (62.2 KB) - added by anischarolia 10 months ago.
Screenshot for solved email input issue
#46961-updated.patch (353 bytes) - added by anischarolia 10 months ago.
updated patch file for better result
mypatch-2.patch (419 bytes) - added by anischarolia 10 months ago.
updated patch file to target the issue efficiently, and avoiding broad declaration.
#46961(2).patch (402 bytes) - added by anischarolia 10 months ago.
updated patch file for targetting just .regular-text in responsive(<=782px) with max-width:100%

Download all attachments as: .zip

Change History (16)

@anischarolia
10 months ago

patch file for the ticket

@anischarolia
10 months ago

Screenshot for email input issue

@anischarolia
10 months ago

Screenshot for solved email input issue

#1 @desrosj
10 months ago

  • Focuses privacy added; accessibility removed
  • Milestone changed from Awaiting Review to 5.2.1
  • Severity changed from major to minor
  • Version changed from trunk to 4.9.6

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.

#2 @desrosj
10 months ago

  • Summary changed from Desing breaking issue in mobile device to Privacy tool email field stretches past 100% on mobile

@anischarolia
10 months ago

updated patch file for better result

@anischarolia
10 months ago

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

#3 @SergeyBiryukov
10 months ago

  • Component changed from Administration to Privacy

#4 @afercia
10 months ago

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
10 months ago

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

#5 @anischarolia
10 months ago

@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.

Last edited 10 months ago by anischarolia (previous) (diff)

#6 @ianbelanger
9 months ago

  • Keywords commit added; needs-testing removed

#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

Last edited 9 months ago by ianbelanger (previous) (diff)

#7 @desrosj
9 months ago

  • Owner set to desrosj
  • Status changed from new to reviewing

#8 @desrosj
9 months ago

  • Resolution set to fixed
  • Status changed from reviewing to closed

In 45326:

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

Props anischarolia, ianbelanger, afercia.
Fixes #46961.

#9 @desrosj
9 months ago

  • Keywords fixed-major added; commit removed
  • Resolution fixed deleted
  • Status changed from closed to reopened

Reopening for backport.

#10 @desrosj
9 months ago

  • Resolution set to fixed
  • Status changed from reopened to closed

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.

Note: See TracTickets for help on using tickets.