bug(UPopper): if any parent has a container query the popper gets yeeted

[sandros94]

Environment

• Operating System: Windows_NT
• Node Version: v20.6.1
• Nuxt Version: 3.10.1
• CLI Version: 3.10.0
• Nitro Version: 2.8.1
• Package Manager: pnpm@8.15.1
• Builder: -
• User Config: alias, components, devtools, ssr, modules, extends, css, directus, googleFonts, i18n, image, tailwindcss, ui, nuxtMarkdownRender, app, $production, runtimeConfig
• Runtime Modules: @vueuse/nuxt@10.7.2, @nuxt/image@1.1.0, nuxt-directus-next@0.0.10, nuxt-markdown-render@1.5.1, @nuxtjs/i18n@8.1.0
• Build Modules: -

Version

v2.13.0

Reproduction

<template>
  <div class="not-prose @container/languages w-fit">
    <UDropdown :items="languages" :popper="{ arrow: true, placement:'top' }">
      <UButton
        :padded="false"
        class="rounded-full no-underline"
        icon="i-heroicons-language"
        size="2xl"
        variant="ghost"
      />
    </UDropdown>
  </div>
</template>

<script setup lang="ts">
import type { DropdownItem } from '#ui/types'

const languages: DropdownItem[][] = [
  [{ label: 'English' }],
  [{ label: 'Español' }],
  [{ label: 'Italiano' }],
]
</script>

Description

Sometimes images tells more than words...

Removing @container/languages or any other container query, from any parent, fixes the issue.

Additional context

No response

Logs

No response

[sandros94]

This also happens with Popper

[benjamincanac]

Have you tried changing the strategy to absolute?

<template>
  <div class="not-prose @container/languages w-fit">
    <UDropdown :items="languages" :popper="{ arrow: true, placement:'top', strategy: 'absolute' }">
      <UButton
        :padded="false"
        class="rounded-full no-underline"
        icon="i-heroicons-language"
        size="2xl"
        variant="ghost"
      />
    </UDropdown>
  </div>
</template>

You might need to set a width through the ui prop.

[sandros94]

I didn't know the strategy option and indeed that was it.

You might need to set a width through the ui prop.

With something like a button that already has a fixed size it seem not to be required (if you were talking about the dropdown's ui prop).