Popover - invalid value for --radix-popper-available-width

[Powerplex]

Bug report

Current Behavior

Hey :)

I am trying to create a design system Popover using radix Popover primitives.
We were trying to use collisionBoundary to force the Popover to stay in a given container.

From what I understand, Radix is using Floating UI to get the positionning data, and set them in css custom properties that we should use to apply the styles.

For some reason --radix-popper-available-height calculation is correct, but --radix-popper-available-width:-495px; it not.. For it we have huge negative values (ex: -495px).

Expected behavior

I need the popover to stay in its collisionBoundary element.

Reproducible example

CodeSandbox Template

Your environment

Software	Name(s)	Version
Radix Package(s)	@radix-ui/react-popover	1.0.5
React	n/a	18.2.0
Browser	Chrome	112.0.5615.137

[lesha1201]

Should be fixed in #2032

[Powerplex]

@lesha1201 I was using "@radix-ui/react-popover": "^1.0.5" when I experienced the bug and I see no new version have been published yet. Do you know when it will be released ? :)

[benoitgrelard]

There is a new version with the fix, but it's a release candidate: https://www.npmjs.com/package/@radix-ui/react-popover/v/1.0.6-rc.13

I don't have a date yet, but we'll run a public release soon.

[Powerplex]

Thanks @benoitgrelard I can confirm that the RC fixes our issue ✅

We started deploying our design system: Spark (open source). It's combining Radix with TailwindCSS mainly. Radix is SUPER helpful and help us a lot to push for accessibility in our project, which is great.

When we grow more mature I hope we can eventually contribute on Radix issues.