Skip to content

fix(apollo-react): correct NodePropertyTrigger popover alignment and gap #814

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
1980computer wants to merge 1 commit into
base: main
Choose a base branch
from
+8 −1
Open

fix(apollo-react): correct NodePropertyTrigger popover alignment and gap #814

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 8 additions & 1 deletion packages/apollo-react/src/canvas/controls/NodePropertyTrigger/NodePropertyTrigger.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -509,7 +509,14 @@ export function NodePropertyTrigger({
<DropdownMenuContent
data-node-property-trigger-menu
align="end"
sideOffset={8}
// sideOffset + alignOffset compensate for the pill's p-1 (4px) wrapper padding.
// The DropdownMenuTrigger is the sliders button, whose bottom is 4px above the
// pill's bottom edge and whose right edge is 4px inside the pill's right edge.
// sideOffset={12}: 12 - 4 = 8px gap from pill bottom ✓
// alignOffset={-4}: for align="end" negative shifts content RIGHT →
// content right = sliders button right + 4 = pill right ✓
sideOffset={12}
alignOffset={-4}
className="w-56 rounded-xl border-border-subtle bg-surface-raised p-0 shadow-[0_4px_16px_rgba(0,0,0,0.12)]"
>
{children ?? defaultSections}
Expand Down
Loading