`getAnchoredPosition` does not respect `margin` on document body

[EnixCoda]

Hi, I noticed that the tooltips in PR pages are not aligned properly when body has margin set.

Check out the comparison below, you can see the tooltip shifts 200px relative to body between the 2 cases. And 200px is exactly the margin-left set to body.

no margin on body	Manually add 200px margin on body

Why would body has margin?

I noticed this issue because I use a GitHub browser extension that adds a sidebar to the page and set margin to body so that the sidebar would not overlap page content. I understand that primer is not responsible for handling of user's browser extension use case. But perhaps my use case has revealed a tiny defect of primer/behaviors and would help improve it. :)

Some insights I have noticed

Tooltip's position was set by

https://github.com/primer/view_components/blob/81eea01d0034c55771ce3e6c2afc685d364afc6c/app/components/primer/alpha/tool_tip.ts#L416-L417

And the position was calculated from getAnchoredPosition

https://github.com/primer/behaviors/blob/6ed742f3d61f3aa0d3ed38a28d2db16b59f5b33f/src/anchored-position.ts#L140

In getAnchoredPosition, the relativeRect has the correct left value for tooltip, if it was set to tooltip's left style, it would align properly.

https://github.com/primer/behaviors/blob/6ed742f3d61f3aa0d3ed38a28d2db16b59f5b33f/src/anchored-position.ts#L153-L156

However, the relativeRect was then passed to pureCalculateAnchoredPosition and it returned a different left.

https://github.com/primer/behaviors/blob/6ed742f3d61f3aa0d3ed38a28d2db16b59f5b33f/src/anchored-position.ts#L290-L379

---

Thank you for this awesome project!

[siddharthkp]

Thanks for reporting! I'll poke around the function to see if there are any unintentional effects of including margin 😇

[EnixCoda]

Thank you!

A new finding: I noticed that the PR review dialog has been updated today. It shifts for the same reason while the previous version used to work well.

[keithamus]

@EnixCoda would you like to make a PR? With a PR we could try integrating it to see if there are any adverse effects (I think unlikely as we have margin:0 on body?).

[joshblack]

Hi all! 👋 Just wanted to leave a comment to check-in and see if this issue was still present and, if not, to close out this issue.

[EnixCoda]

Hi @joshblack

Yes this issue still presents.

[github-actions[bot]]

Hi! This issue has been marked as stale because it has been open with no activity for 180 days. You can comment on the issue or remove the stale label to keep it open. If you do nothing, this issue will be closed in 7 days.

[EnixCoda]

ping

[lesliecdubs]

Thanks @EnixCoda. Would you be willing to open a PR? As mentioned, with a PR we would be able to try integrating it to reveal if this change causes any adverse effects.

[EnixCoda]

Thanks @EnixCoda. Would you be willing to open a PR? As mentioned, with a PR we would be able to try integrating it to reveal if this change causes any adverse effects.

Hi @lesliecdubs I'd like to give a try. But the required change is beyond what I can do using Chrome devtool Override Content feature. I need help setting up the dev env. I'm not familiar enough with the primer components to reproduce the issue locally. I can not find the same component.

It would be wonderful if you could help make a codesandbox.io demo that could reproduce the issue. Then I could try fix it.

[keithamus]

@EnixCoda I wouldn't worry about having it working exactly the same as the bug. Try to set up a reduced code example in something like a codesandbox, that exemplifies the same issue and work to that.

[EnixCoda]

I guess AnchoredOverlay was the correct component.

Then I tried to create a codesandbox but it failed to run. https://codesandbox.io/p/sandbox/wls675

However, I made it to work locally. So I believe that was a bug of codesandbox, not primer. But the issue cannot be reproduced locally.

Some differences I have noticed

1. The GitHub page is using a custom web components. It has different HTML structure than my local react version AnchoredOverlay.
2. The GitHub page puts the anchored-position next to the trigger while my local AnchoredOverlay is rendered under body via react portal

GitHub pull request page	My local

Note: I deleted some elements from GitHub page. And the component still works without re-rendering the rest part of page. This also proves that it is not a react component.

If GitHub page is rendered with Rails instead of react. Would you briefly describe what should I do to reproduce it? Thanks!