Slight side-scroll in sidebar in WordPress 6.7 RC1

[laurelfulford]

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

[wildworks]

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]

Add box-sizing:border-box solves the problem

[wildworks]

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.

[joedolson]

#62335 was marked as a duplicate.

[domainsupport]

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

[wildworks]

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

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.

[domainsupport]

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

I'll upload an updated patch accordingly.

[domainsupport]

Updated patch to also fix the text overlap.

[wildworks]

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.

[domainsupport]

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.

[sabernhardt]

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

• 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

[desrosj]

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

[sabernhardt]

#62443 was marked as a duplicate.

[joedolson]

@desrosj Yep. I can take care of this.

[joedolson]

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.

[joedolson]

Re-opening for dev sign off for 6.7.1.

Merged in https://core.trac.wordpress.org/changeset/59409.

[desrosj]

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

[desrosj]

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.