Fix: theme showcase "More" menu renders on the wrong side (DOTTHEM-370)#111661
Open
devNigel wants to merge 1 commit into
Open
Fix: theme showcase "More" menu renders on the wrong side (DOTTHEM-370)#111661devNigel wants to merge 1 commit into
devNigel wants to merge 1 commit into
Conversation
The "More" overflow menu in ResponsiveToolbarGroup opened on the opposite side of the screen from its toggle button on the logged-in theme showcase. The popover was given the toolbar container's classes via popoverProps, which made it lay out at the full container width. A full-width popover with bottom-start placement overflows the viewport, so floating-ui's shift middleware slid it across to the far side. Dropping that className lets the popover size to its content and anchor under the "More" button. The popover renders inside the toolbar container, so menu-item theming still applies through descendant selectors. Fixes DOTTHEM-370 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Jetpack Cloud Live (direct link)
Automattic for Agencies Live (direct link)
|
Contributor
|
This PR modifies the release build for the following Calypso Apps: For info about this notification, see here: PCYsg-OT6-p2
To test WordPress.com changes, run |
matticbot
added
the
[Status] Needs Review
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes DOTTHEM-370
Proposed Changes
popoverProps={ { className: classes } }from the "More" overflowDropdowninResponsiveToolbarGroup'sDropdownGroup.Why are these changes being made?
On the logged-in theme showcase, clicking More in the category filter opened the hidden-categories menu on the opposite side of the screen from the button.
The menu is a
@wordpress/componentsDropdown/Popover. ThepopoverPropsclassName applied the toolbar container classes (responsive-toolbar-group__dropdownetc.) directly onto the floating popover, which made it lay out at the full container width (~1440px in a 1800px viewport) instead of sizing to its menu content. A full-width popover with the defaultbottom-startplacement overflows the viewport to the right, so floating-ui'sshiftmiddleware slides it all the way across to keep it on screen — landing it on the far side, away from the toggle.Dropping that className lets the popover size to its content and anchor correctly under the More button. The popover renders inside the toolbar container (its offset parent is the container), so the existing menu-item styling continues to apply through descendant selectors — no theming is lost.
This className was introduced in #110552; this change effectively reverts that one line, which was the regression source.
Testing Instructions
/themesor/themes/sitename.wordpress.com)Verified live on a local Calypso dev server (logged-in showcase, 1800px viewport): the popover width dropped from ~1439px to its content width and it now renders under the toggle.
Screenshots
Before:
After:
Pre-merge Checklist
Note: Opening this PR auto-flips DOTTHEM-370 to "In Progress" in Linear. This is a Bug Blitz contribution that is review-ready, not actively being worked by the owning team.