ui icon indicating copy to clipboard operation
ui copied to clipboard

Popover is placed incorrectly because of w-full on target

Open iBobik opened this issue 10 months ago • 2 comments

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. Bez názvu 2

Additional context

Default ui config has this part:

trigger: 'inline-flex w-full',

Logs

No response

iBobik avatar Apr 13 '24 00:04 iBobik

Same issue occurs for container queries @container on target.

Overriding default config seems to resolve it.

trigger: 'inline-flex',

claytonchew avatar May 09 '24 15:05 claytonchew

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.

KevinCocquyt39 avatar May 30 '24 09:05 KevinCocquyt39