WordPress.org

Make WordPress Core

Opened 6 months ago

Closed 6 weeks 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:
PR Number:

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 6 months ago.
47366.diff (357 bytes) - added by mukesh27 6 months ago.
Patch.
Screen Shot 2019-05-24 at 11.40.50 AM.png (333.1 KB) - added by desrosj 6 months ago.
Screen Shot 2019-05-24 at 11.40.27 AM.png (385.8 KB) - added by desrosj 6 months ago.
Screen Shot 2019-05-24 at 11.40.20 AM.png (390.8 KB) - added by desrosj 6 months ago.
47366.2.diff (364 bytes) - added by desrosj 6 months ago.
47366.reading-settings.png (14.6 KB) - added by SergeyBiryukov 6 months ago.
47366.options-reading-max-width-100%.png (131.7 KB) - added by mukesh27 6 months ago.
Fix with max-width 100%
47366.3.diff (323 bytes) - added by adhitya03 4 months 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 4 months ago.
Forms.css changes
47366.5.diff (291 bytes) - added by adhitya03 4 months 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 3 months ago.
Screenshot-1
Screenshot-2.png (52.6 KB) - added by paresh07 3 months ago.
Screenshot-2
47366.6.diff (412 bytes) - added by garrett-eclipse 7 weeks 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 7 weeks 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 7 weeks 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 7 weeks ago.
Long options overflow viewport on specific browsers to allow for more context

Download all attachments as: .zip

Change History (39)

@SergeyBiryukov
6 months ago

#1 @SergeyBiryukov
6 months ago

  • Description modified (diff)

@mukesh27
6 months ago

Patch.

#2 @mukesh27
6 months ago

  • Keywords has-patch added; needs-patch removed

Attached patch that add max-width in select tag.

#3 @desrosj
6 months 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
6 months ago

#4 @SergeyBiryukov
6 months ago

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

@mukesh27
6 months ago

Fix with max-width 100%

#5 @mukesh27
6 months 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.


5 months ago

#7 @desrosj
5 months 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.


5 months ago

@adhitya03
4 months ago

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

#9 @adhitya03
4 months 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
4 months 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
4 months ago

  • Keywords needs-refresh removed

@jalpa1984
4 months ago

Forms.css changes

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


4 months ago

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


4 months ago

@adhitya03
4 months 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.


3 months ago

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


3 months ago

#16 follow-up: @nrqsnchz
3 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
3 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
3 months ago

Screenshot-1

@paresh07
3 months ago

Screenshot-2

#18 @paresh07
3 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.


7 weeks ago

@garrett-eclipse
7 weeks ago

Refresh to use max-width 25rem

@garrett-eclipse
7 weeks ago

Privacy Policy setting w/ max-width applied

@garrett-eclipse
7 weeks ago

Reading Settings w/ max-width applied

@garrett-eclipse
7 weeks ago

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

#20 @garrett-eclipse
7 weeks 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.


6 weeks ago

#22 @whyisjake
6 weeks 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.