Popover height not recalculating when content size changes

[kieranm]

Hi all,

I'm coding up a system to expand/collapse long event descriptions in a calendar.

Without my system, the popover renders correctly and takes up the full available height. I then constrain the height using the --radix-popper-available-height and everything works perfectly. I have a radix scroll inside, so the contents scrolls correctly.

However, with my collapse/expand button, the height of the popover is not recalculated, so it's not using the full available height.

Screen.Recording.2023-04-27.at.13.14.18.mov

Is this expected, or is it something to do with the way I'm using a scroll area inside the popover? How can I force the popover to recompute its position and height?

Thanks!
Kieran

[joaom00]

Maybe using key to see if it recalculates the height

[kieranm]

I think this would work, but it also causes the content to completely remount (resetting any internal state such as show/hide). It also causes the open animation to play again.

I wonder if there is a better way 🤔

[joaom00]

Ok, I think I know what's going on. The --radix-popper-content-available-height takes into account the alignment and it seems that in the version where floating-ui is used in Radix the available height is not calculated as expected if the alignment is centered and placement is left/right.

You can play around with the align prop to see this happening. https://codesandbox.io/p/sandbox/loving-platform-6kyzbe?file=%2FApp.jsx

Looks like this has been fixed at floating-ui/floating-ui#2163. And it seems to work as expected https://codesandbox.io/s/great-microservice-onol1m?file=/src/App.tsx

Therefore, in your case I think you will have to use max-height: 100vh

[kieranm]

Thanks so much for investigating! 100vh seems to work much better.