fix: prevent accordion toggle button overflow at full width #71446
Conversation
t-hamano
left a comment
t-hamano
left a comment
There was a problem hiding this comment.
Thanks for the PR
I think adding the overflow-x: hidden to the header will cause the outline to disappear when the header button is focused.
It's a good idea to use the .accordion-content__toggle selector.
t-hamano
added
[Type] Bug
R1shabh-Gupta
requested review from
ajitbohra and
fabiankaegy
as code owners
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
vinay070403
left a comment
vinay070403
left a comment
There was a problem hiding this comment.
The E2E test site-editor-url-navigation.spec.js is failing on GitHub Actions at line 44 due to a TimeoutError. Playwright cannot find or click the button For a specific item within 10s.
Possible reasons: the button is not rendered yet, the selector changed, or CI is slower than local.
Next steps: review the button’s presence, consider increasing timeout, or add waitFor before clicking to ensure stability.
|
@vinay070403 The instability of the E2E tests is completely unrelated to this PR. |
|
👋 It looks like this is causing a vertical scrollbar on the accordion header: Editor: Front end: Maybe we need to use |
|
@mikachan Thanks for noticing!
Yes, this seems to be the best approach. |
|
Sorry, I’m not sure how I missed it. Let me double-check. Should I create a new PR with the fix and reference this PR in it? |
No problem at all. A new PR with a reference to this one sounds good! |
4 participants
What?
Closes #71437
Fixes the accordion toggle button overflow issue when the accordion block is set to full width alignment.
Why?
When an Accordion block is set to full width and the Accordion Header is clicked to expand the panel, the rotated toggle button element overflows horizontally, causing an unwanted horizontal scrollbar to appear. This creates a poor user experience and visual inconsistency.
The issue was occurring because the accordion heading container didn't have proper overflow handling for the rotated toggle icon.
How?
Added
overflow-x: hiddento the.accordion-content__toggleCSS selector. This prevents the rotated toggle button from causing horizontal overflow while maintaining the visual rotation effect.Testing Instructions
Screenshots or screencast
Before
After