WordPress.org

Make WordPress Core

Opened 2 years ago

Closed 21 months ago

#47366 closed defect (bug) (fixed)

Privacy Policy page dropdown needs a max-width

Reported by: SergeyBiryukov Owned by: garrett-eclipse
Milestone: 5.3 Priority: normal
Severity: normal Version:
Component: Administration Keywords: has-screenshots has-patch commit
Focuses: ui, privacy Cc:

Description (last modified by SergeyBiryukov)

Previously: #19613, #19782, #21956.

If there's a page with an extra long title, the Privacy Policy page dropdown in Privacy Settings overflows the page width.

See the screenshot.

Attachments (17)

47366.png (41.8 KB) - added by SergeyBiryukov 2 years ago.
47366.diff (357 bytes) - added by mukesh27 2 years ago.
Patch.
Screen Shot 2019-05-24 at 11.40.50 AM.png (333.1 KB) - added by desrosj 2 years ago.
Screen Shot 2019-05-24 at 11.40.27 AM.png (385.8 KB) - added by desrosj 2 years ago.
Screen Shot 2019-05-24 at 11.40.20 AM.png (390.8 KB) - added by desrosj 2 years ago.
47366.2.diff (364 bytes) - added by desrosj 2 years ago.
47366.reading-settings.png (14.6 KB) - added by SergeyBiryukov 2 years ago.
47366.options-reading-max-width-100%.png (131.7 KB) - added by mukesh27 2 years ago.
Fix with max-width 100%
47366.3.diff (323 bytes) - added by adhitya03 2 years ago.
Attached patch that add max-width in .wp-admin select to resolve the issue in Privacy Settings and Reading Settings page.
47366.4.diff (357 bytes) - added by jalpa1984 2 years ago.
Forms.css changes
47366.5.diff (291 bytes) - added by adhitya03 2 years ago.
Set all select tag in Settings page to max width 25rem, same width with input tag in Settings page, do not need "!important" rule
2019-08-25.png (47.9 KB) - added by paresh07 22 months ago.
Screenshot-1
Screenshot-2.png (52.6 KB) - added by paresh07 22 months ago.
Screenshot-2
47366.6.diff (412 bytes) - added by garrett-eclipse 21 months ago.
Refresh to use max-width 25rem
Screen Shot 2019-09-30 at 11.49.29 PM.png (40.8 KB) - added by garrett-eclipse 21 months ago.
Privacy Policy setting w/ max-width applied
Screen Shot 2019-09-30 at 11.49.35 PM.png (86.3 KB) - added by garrett-eclipse 21 months ago.
Reading Settings w/ max-width applied
Screen Shot 2019-09-30 at 11.27.41 PM.png (457.8 KB) - added by garrett-eclipse 21 months ago.
Long options overflow viewport on specific browsers to allow for more context

Download all attachments as: .zip

Change History (39)

@SergeyBiryukov
2 years ago

#1 @SergeyBiryukov
2 years ago

  • Description modified (diff)

@mukesh27
2 years ago

Patch.

#2 @mukesh27
2 years ago

  • Keywords has-patch added; needs-patch removed

Attached patch that add max-width in select tag.

#3 @desrosj
2 years ago

  • Keywords needs-design-feedback added

47366.2.diff uses 100% instead, which allows the <select> to fill the width of the screen on smaller orientations.

I am tagging as needs-design-feedback because on medium screens, the dropdown and button do not align with other elements on the page and the button is butting against the dropdown.

@desrosj
2 years ago

#4 @SergeyBiryukov
2 years ago

Looks like the same issue also applies to Reading Settings: 47366.reading-settings.png.

@mukesh27
2 years ago

Fix with max-width 100%

#5 @mukesh27
2 years ago

If we use max-width: 100%; here then it will not resolve our issue. check 47366.options-reading-max-width-100%.png​ attached screenshot.

This ticket was mentioned in Slack in #core by desrosj. View the logs.


2 years ago

#7 @desrosj
2 years ago

  • Keywords needs-refresh added

47366.2.diff only targets the privacy policy tools page. The patch needs to be refreshed to include a more general fix that will help with 47366.reading-settings.png.

This ticket was mentioned in Slack in #core-privacy by postphotos. View the logs.


2 years ago

@adhitya03
2 years ago

Attached patch that add max-width in .wp-admin select to resolve the issue in Privacy Settings and Reading Settings page.

#9 @adhitya03
2 years ago

use max-width: 15rem because I see select on the user profile's page, they use 15rem for the width. So the select width will be consistent with other pages.

#10 @adhitya03
2 years ago

Oh, I forgot to mention that the patch also work for choosing Default Post Category and Default Mail Category in Writing Settings Page if they have a very very long category.

#11 @adhitya03
2 years ago

  • Keywords needs-refresh removed

@jalpa1984
2 years ago

Forms.css changes

This ticket was mentioned in Slack in #design by karmatosed. View the logs.


2 years ago

This ticket was mentioned in Slack in #core-privacy by garrett-eclipse. View the logs.


2 years ago

@adhitya03
2 years ago

Set all select tag in Settings page to max width 25rem, same width with input tag in Settings page, do not need "!important" rule

This ticket was mentioned in Slack in #design by karmatosed. View the logs.


22 months ago

This ticket was mentioned in Slack in #design by karmatosed. View the logs.


22 months ago

#16 follow-up: @nrqsnchz
22 months ago

  • Keywords needs-design-feedback removed

Discussed today during the design team's weekly core triage meeting. We agreed that setting a max-width that is consistent with other select elements on other pages makes sense.

#17 in reply to: ↑ 16 @adhitya03
22 months ago

Replying to nrqsnchz:

Discussed today during the design team's weekly core triage meeting. We agreed that setting a max-width that is consistent with other select elements on other pages makes sense.

So, I think patch 47366.3.diff is appropriate, It uses 15rem for max-width, same with other pages that have max-width rule like "Display name publicly as : select " in user profile's page. And it also resolve the same issue(very long option) in Default Post Category and Default Mail Category in Writing Settings Page.

@paresh07
22 months ago

Screenshot-1

@paresh07
22 months ago

Screenshot-2

#18 @paresh07
22 months ago

Issue with the current approach:

With the CSS we can only handle the width of the select box but we can not change the width of select option dropdown list. So in case of a large page title, we can adjust the width of the select box but its width will not match with the dropdown options list. See screenshot 1 in the attachments.

Screenshot-1

Suggestion:

Show the page title up to some characters in the select option & we can display the full title on hover using the "title" attribute of HTML. Se the screenshot 2.

Screenshot-2

Example:

<option title="This is a sample page with very very long title" value="1234">This is a sample page...</option>

This ticket was mentioned in Slack in #core by desrosj. View the logs.


21 months ago

@garrett-eclipse
21 months ago

Refresh to use max-width 25rem

@garrett-eclipse
21 months ago

Privacy Policy setting w/ max-width applied

@garrett-eclipse
21 months ago

Reading Settings w/ max-width applied

@garrett-eclipse
21 months ago

Long options overflow viewport on specific browsers to allow for more context

#20 @garrett-eclipse
21 months ago

  • Component changed from Privacy to Administration
  • Focuses privacy added; administration removed
  • Keywords commit added; good-first-bug removed
  • Owner set to garrett-eclipse
  • Status changed from new to accepted

Thanks @SergeyBiryukov / @mukesh27 / @desrosj / @adhitya03 / @jalpa1984 for the patches they were very helpful in reproducing and analyzing the options here.

I've refreshed @adhitya03 patch to apply against trunk with 47366.6.diff, I agree we should be 'consistent with other pages'.

Testing with the patches the max-width: 25rem; conformed with other inputs across browsers and screensizes as well it never allowed the content to overflow the page.

@paresh07 while I appreciate the feedback I feel there's no need to truncate the actual option contents as that would interfere with screenreaders as well on Chrome and other browsers the options will never overflow the screen, but if you are on desktop it will overflow the viewport outside of your browser to allow users to read the full title/contents. I've illustrated that here - screenshot

Testing across browsers and through the multiple admin screens, this addresses the issues on Privacy and Reading Settings without causing reversion in other areas.

@SergeyBiryukov / @desrosj this is ready for a final committers review.

This ticket was mentioned in Slack in #core-privacy by garrett-eclipse. View the logs.


21 months ago

#22 @whyisjake
21 months ago

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

In 46411:

Administration: Add a max-width to the Privacy Policy Page dropdown.

If there's a page with an extra long title, the Privacy Policy page dropdown in Privacy Settings overflows the page width.

Fixes #47366
Props garrett-eclipse, SergeyBiryukov, mukesh27, desrosj, adhitya03, jalpa1984, nrqsnchz, paresh07.

Note: See TracTickets for help on using tickets.