Popover is placed incorrectly because of w-full on target

[iBobik]

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

[claytonchew]

Same issue occurs for container queries @container on target.

Overriding default config seems to resolve it.

trigger: 'inline-flex',

[KevinCocquyt39]

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.

[benjamincanac]

The problem shouldn't exist in v3, we won't be fixing this in v2 as it could break a lot of apps. You can use a flex wrapper.

[iBobik]

The problem shouldn't exist in v3, we won't be fixing this in v2 as it could break a lot of apps. You can use a flex wrapper.

You are right, I used it yesterday in v3 without issue.