fix(apollo-react): correct NodePropertyTrigger popover alignment and gap#814
Open
1980computer wants to merge 1 commit into
Open
fix(apollo-react): correct NodePropertyTrigger popover alignment and gap#8141980computer wants to merge 1 commit into
1980computer wants to merge 1 commit into
Conversation
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
Dependency License Review
License distribution
Excluded packages
|
There was a problem hiding this comment.
Pull request overview
Fixes visual alignment regressions in NodePropertyTrigger’s dropdown menu positioning by adjusting Radix offsets to account for the pill wrapper padding.
Changes:
- Update
DropdownMenuContentpositioning withsideOffset={12}andalignOffset={-4}to align the popover with the pill edges and restore the intended gap. - Add in-code rationale comments explaining the offset math relative to the pill’s
p-1padding. - Minor story file whitespace change (trailing blank line).
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
packages/apollo-react/src/canvas/controls/NodePropertyTrigger/NodePropertyTrigger.tsx |
Adjusts Radix dropdown offsets to correct popover alignment and spacing relative to the trigger pill. |
packages/apollo-react/src/canvas/controls/NodePropertyTrigger/NodePropertyTrigger.stories.tsx |
Adds trailing whitespace at EOF (no functional/story behavior change). |
Comment on lines
+299
to
+301
| }, | ||
| }; | ||
|
|
The DropdownMenuTrigger is the sliders button inside the pill, not the
pill wrapper itself. Previous sideOffset={8} measured from the button
bottom, leaving only 4px from the pill bottom (8 - 4px pill padding).
Fixed to sideOffset={12} for a true 8px gap from the pill's bottom edge.
Added alignOffset={-4} so the popover's right edge aligns with the
pill's right edge rather than the button's right edge (4px inset).
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1980computer
force-pushed
the
fix/node-property-trigger-alignment
branch
from
fbd62f3 to
6e6a07b
Compare
github-actions
Bot
added
size:XS
CalinaCristian
approved these changes
Jun 12, 2026
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
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.
Summary
Fixes two visual alignment issues with the
NodePropertyTriggerpopover that were not carried over when the component was rebuilt:alignOffset={-4}— for Radixalign="end", negative values shift toward END (right in LTR), compensating for the 4pxp-1padding on the pill wrapper.sideOffset={8}measured from the sliders button bottom, not the pill bottom. Since the button sits 4px above the pill's bottom edge (p-1padding), the effective gap was only 4px. Changed tosideOffset={12}so the gap from the pill's bottom to the popover top is exactly 8px.Root cause
DropdownMenuTriggerwraps the sliders<button>element, not the outer pill<div>. Radix measuressideOffsetandalignOffsetfrom the trigger element's bounding box — so both offsets must account for the pill's 4px wrapper padding.Visual
Test plan
🤖 Generated with Claude Code