ui
ui copied to clipboard
Popover is placed incorrectly because of w-full on target
Environment
- Operating System: Linux
- Node Version: v18.18.0
- Nuxt Version: 3.11.2
- CLI Version: 3.11.1
- Nitro Version: 2.9.6
- Package Manager: [email protected]
- Builder: -
- User Config: modules
- Runtime Modules: @nuxt/[email protected]
- Build Modules: -
Version
2.15.2
Reproduction
https://stackblitz.com/edit/nuxt-ui-kx9ong?file=app.vue
Description
There is unnecessary w-full
on the target wrapper, so the pannel is pushed to the line center while target button is usually at the line start.
Additional context
Default ui config has this part:
trigger: 'inline-flex w-full',
Logs
No response
Same issue occurs for container queries @container
on target.
Overriding default config seems to resolve it.
trigger: 'inline-flex',
I'm not sure if I should create a new issue/solution for this but it might help some people when using container queries. I'm currently using those and my popovers were appearing at the end of a list (in which there are cards using container queries). I solved it by using "strategy: 'absolute'" and setting a min-width on the content inside the panel.