UPopover displays panel in wrong place if used inside `container-type: inline-size;` declared on ancestor.
KonradDRAST opened this issue · comments
Environment
- Operating System: Windows_NT
- Node Version: v20.10.0
- Nuxt Version: 3.11.2
- CLI Version: 3.11.1
- Nitro Version: 2.9.6
- Package Manager: yarn@4.1.1
- Builder: -
- User Config: -
- Runtime Modules: -
- Build Modules: -
Version
2.8
Reproduction
Just use popover inside the element, that has container-type: inline-size; defined for container queries.
I'm using the official Tailwind plugin for that: https://github.com/tailwindlabs/tailwindcss-container-queries, with the @container class.
Description
I've stumbled upon strange Popover panel placement when working on my app.
Everywhere popover was working OK, but in one of the components, the panel was waaaay off from the proper position.
Upon investigation I've discovered that the issue is caused by a @container class on the root component element, that contains the UPopover.
It look like that:
Once the @container class is removed, popover panel is back when it belongs:
Additional context
No response
Logs
No response
Have you checked #1351?