Popover.Content not translating correctly

[raviteja83]

Any suggestions on how to narrow down on this?

"@radix-ui/react-popover": "1.0.0" - version

Broken popover. Expectation is popover end matches with the emoji

Expectation:

[benoitgrelard]

Hey @raviteja83,

I'm not sure what I'm supposed to be seeing here from the screenshot.
Would you have a sandbox to share so we can take a look at your issue?

[benoitgrelard]

I don't really follow the issue sorry.
Also I noticed you are using your own library (I assume built with Radix) so that makes it hard to debug anyway.
Are you able to reproduce an issue with Radix directly?

[raviteja83]

Really appreciate you taking the time to help out.
In the library, we are simply wrapping Popover with styled from stitches.
I have tried with both align="start" and align="end" in the sandbox, but in both cases, the popover content starts at the end of the trigger.
If you see the expecation image in the question, that is what I am trying to achieve, instead what I am getting is the popover shifted to the right.

[benoitgrelard]

I understand.
The reason I asked for a barebones example is because there could be things happening within your lib/styles that throw it off, so it's very hard to take all that into considerations if we can't see it. Hence why I'm asking if you're able to reproduce your positioning issue in a simpler way.

As a start, here's the demo from the docs with align="end" which works fine: https://codesandbox.io/s/popover-align-end-2z9ysn?file=/App.js

[raviteja83]

I have updated the sandbox with the radix example. Seems like the issue might be with the Picker component. Can you point me in a direction, so I can figure out the issue.
https://k9yzx7.csb.app/

[raviteja83]

Seems to be working fine in the radix example after some css changes. Let me take a look again. Thanks for the assist. Marking as resolved.