Make WordPress Core

Opened 5 weeks ago

Closed 12 days ago

Last modified 11 days ago

#62313 closed defect (bug) (fixed)

Slight side-scroll in sidebar in WordPress 6.7 RC1

Reported by: laurelfulford's profile laurelfulford Owned by: joedolson's profile joedolson
Milestone: 6.7.1 Priority: normal
Severity: normal Version: 6.7
Component: Customize Keywords: has-patch fixed-major commit dev-reviewed
Focuses: css Cc:

Description

In WordPress 6.7 RC1, there's a slight side-scroll in the Customizer sidebar.

I can recreate this with Twenty Nineteen and no other plugins activated.

I can't recreate this when the site is running WordPress 6.6.2.

Steps to reproduce

  1. Start on a site running the latest WP 6.7 RC.
  2. Install a theme that will load the Customizer (like Twenty Nineteen).
  3. Open the Customizer and note the appearance of the panel. If you don't have scrollbars set to be visible on Mac, you may need to try to scroll sideways inside of the sidebar to reproduce.

I was able to reproduce on OS 15.0, in Firefox (v. 131.0.3), Safari (v. 18.0), and Chrome (v. 129.0.6668.101).

Attachments (4)

customizer-6.7RC1.png (33.8 KB) - added by laurelfulford 5 weeks ago.
patch.diff (448 bytes) - added by wildworks 5 weeks ago.
Add box-sizing:border-box solves the problem
customizer-long-title-6.3.png (22.0 KB) - added by wildworks 4 weeks ago.
Launch WP6.3 in the playground. If I access the customizer and apply long text via the browser console, the text overlaps the chevron icon.
62313.diff (512 bytes) - added by domainsupport 4 weeks ago.
Updated patch to also fix the text overlap.

Download all attachments as: .zip

Change History (27)

#1 @wildworks
5 weeks ago

Thanks for the report.

This issue is due to #42002. Also, this issue first appeared in WP 6.7, so I expect it will need to be fixed in the WP 6.7 release.

@wildworks
5 weeks ago

Add box-sizing:border-box solves the problem

#2 @wildworks
5 weeks ago

patch.diff solves the problem by simply adding box-sizing:border-box only. Alternatively, removing all:unset and adding some missing styles would also solve the problem.

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


4 weeks ago

#4 @joedolson
4 weeks ago

  • Owner set to joedolson
  • Status changed from new to accepted

#5 @joedolson
4 weeks ago

#62335 was marked as a duplicate.

#6 @domainsupport
4 weeks ago

Hi, there is an additional UX issue with regards to this whereby when the button text is long enough it is shown behind the arrow at the end so actually, the padding value also needs to be updated from padding: 10px 10px 11px 14px; to padding: 10px 26px 11px 14px;.

Oliver

#7 @wildworks
4 weeks ago

@domainsupport Thanks for the additional information. It seems the padding issue isn't new to WP6.7. I tested it with Playground and it's been there since at least WordPress 6.3.

@wildworks
4 weeks ago

Launch WP6.3 in the playground. If I access the customizer and apply long text via the browser console, the text overlaps the chevron icon.

#8 @domainsupport
4 weeks ago

Yes, that's precisely what I'm talking about :)

I'll upload an updated patch accordingly.

@domainsupport
4 weeks ago

Updated patch to also fix the text overlap.

#9 @wildworks
4 weeks ago

I think the scrollbar and padding issues need to be addressed separately. The scrollbar issue first appeared in WP 6.7, so I think it needs to be fixed in 6.7 major or minor release.

On the other hand, the padding issue is not new to 6.7, so it might be better addressed separately in #62335.

#10 @domainsupport
4 weeks ago

OK, I'll add a patch to the other ticket. Although, this one will need to be patched first in order for #62335 to fix the overlap issue.

#11 @sabernhardt
3 weeks ago

  • Focuses css added
  • Keywords has-patch added
  • Milestone changed from Awaiting Review to 6.7.1

In addition to the horizontal scrolling with the customize-pane-parent panel, the chevron icon itself is not clickable for the Customizer buttons. If the box-sizing changes for all of these Customizer buttons, then the Menus and Widgets panel buttons would have even less clickable area because the heading still has 30px padding (on the right).

I was able to make the icon pseudo-element clickable with pointer-events: none, but I am open to other ideas.

I think the Customizer button padding should be fixed on this ticket so both parent and child panels would avoid overlap in the same way, but a separate ticket could adjust padding for the Menus screen's buttons (which is not a new issue).

This ticket was mentioned in PR #7746 on WordPress/wordpress-develop by @sabernhardt.


3 weeks ago
#12

  • Adds box-sizing: border-box to the buttons so they do not cause a horizontal scroll.
  • Increases specificity to remove padding from headings in the Menus and Widgets panels.
  • Makes the chevron icon clickable.
  • Adds padding to the buttons to avoid overlapping the chevron (30 pixels, to match what the child panel headings had).
  • Adds a semicolon in common.css.

Trac 62313

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


2 weeks ago

#14 @desrosj
2 weeks ago

  • Keywords commit added

The attached PR is looking good. @joedolson are you able to do a final review and commit?

#15 @sabernhardt
2 weeks ago

#62443 was marked as a duplicate.

#16 @joedolson
2 weeks ago

@desrosj Yep. I can take care of this.

#17 @joedolson
2 weeks ago

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

In 59409:

Customizer: Fix layout issues in customizer accordions.

Adjust some CSS characteristics in the customizer accordions to avoid a slight horizontal scroll, allow the chevron icon to be part of the clickable control surface, and resolve a pre-existing padding issue allowing overflow on accordion headings.

Follow up to [59224].

Props laurelfulford, wildworks, domainsupport, sabernhardt, rcreators, desrosj, sainathpoojary.
Fixes #62313, #62335.

#18 @joedolson
2 weeks ago

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

Re-opening for dev sign off for 6.7.1.

#19 @desrosj
13 days ago

  • Keywords fixed-major added

#21 @desrosj
12 days ago

  • Keywords commit dev-reviewed added; dev-feedback removed

Thanks @joedolson. Looks good, going to backport now.

#22 @desrosj
12 days ago

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

In 59420:

Customizer: Fix layout issues in customizer accordions.

Adjust some CSS characteristics in the customizer accordions to avoid a slight horizontal scroll, allow the chevron icon to be part of the clickable control surface, and resolve a pre-existing padding issue allowing overflow on accordion headings.

Follow up to [59224].

Reviewed by desrosj, joedolson.
Merges [59409] to the 6.7 branch.

Props laurelfulford, wildworks, domainsupport, sabernhardt, rcreators, desrosj, sainathpoojary.
Fixes #62313, #62335.

#23 @desrosj
11 days ago

  • Summary changed from Customizer: Slight side-scroll in sidebar in WordPress 6.7 RC1 to Slight side-scroll in sidebar in WordPress 6.7 RC1
Note: See TracTickets for help on using tickets.