Empty div on Slideover when title or description props are not used

[metkm]

Environment

• Operating System: Windows_NT
• Node Version: v22.14.0
• Nuxt Version: 4.1.3
• CLI Version: 3.29.3
• Nitro Version: 2.12.7
• Package Manager: npm@11.6.0
• Builder: -
• User Config: modules, ssr, devtools, css, future, experimental, compatibilityDate, vite, eslint, icon
• Runtime Modules: @nuxt/ui@4.0.1, @nuxt/eslint@1.9.0, motion-v/nuxt@1.7.3, @vueuse/nuxt@14.0.0, @pinia/nuxt@0.11.2, pinia-plugin-persistedstate/nuxt@4.5.0
• Build Modules: -

Is this bug related to Nuxt or Vue?

Nuxt

Package

v4.x

Version

v4.0.1

Reproduction

<USlideover side="left">
  ......

  <template #body>
    <p>body</p>
  </template>

  <template #actions>
    <UButton
      icon="i-lucide-arrow-left"
      variant="ghost"
      color="neutral"
      square
    />
  </template>
</USlideover>

Description

When using the Slideover component, if the title or description props are not used, the wrapper div element is not removed, which causes there to be empty gap because of the empty div.

These screenshots show when the close button is present and the #actions slot is used

Additional context

ui/src/runtime/components/Slideover.vue

Lines 161 to 173 in 1e6242e

	<div :class="ui.wrapper({ class: props.ui?.wrapper })">
	<DialogTitle v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
	<slot name="title">
	{{ title }}
	</slot>
	</DialogTitle>
	<DialogDescription v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
	<slot name="description">
	{{ description }}
	</slot>
	</DialogDescription>
	</div>

This div should have something like this

v-if="title || slots.title || description || slots.description"

Logs

[metkm]

Also, is there a reason why the close button is absolutely positioned? If you have a long title and the actions slot is used, this happens.

This absolute position causes another issue, too. The close button is overflowing like this

Now, even if the gap bug is fixed (I manually did it by adding a negative margin for now), I have to absolute position action buttons too, which causes me to not be able to use the title prop because they will overlap