Hello everyone.
I'm using the Popover component in my application, but I'm experiencing an minor (but rather annoying, lol) bug.

Description

When the screen is small enough that the popover won't fully render, it renders the box with the padding to the bottom of the screen, but the content is still rendered on top of it. So the result is that when you scroll, you can see the button and other elements rendered on top and "out of" the box. Below there's an image to try to make it easier to understand. We were having a similar issue when the popover would flip to be rendered on the top of the button, which we managed to fix using 'flip: false'

My code to this component looks something like this (posting only the top most part, because I believe that's where the problem is):

<Popover.Root open={open} onOpenChange={(popup) => setOpen(popup.open)} positioning={ {placement: "bottom", flip: false,  } } >
	<Popover.Trigger asChild>
		<Button variant="subtle" colorPalette="cyan">
			<LuPlus />
			Add something
		</Button>
	</Popover.Trigger>
	<Portal>
		<Popover.Positioner >
			<Popover.Content boxShadow="2xl">
				<Popover.Arrow />
			<Popover.Body>
				<Stack gap="4">
                                /** the content of the popover **/

So I've tried most of the props suggested for positioning, to no success.

Can you guys think of something that might do the trick?

Chakra-UI version

3.22

Browser

Firefox 104.0.4

OS

MacOS