UNavigationMenu dropdown width issue inside UHeader

Package

v4.x

Description

Hi there, I'm not sure if this is a bug or intended behavior, so I'm posting here..

When placing a UNavigationMenu with children inside the UHeader's default slot, the dropdown width becomes too narrow and truncates the child labels.

Is there a any recommended way to fix this?

const items = computed<NavigationMenuItem[]>(() => [
  {
    label: 'Home',
    to: '/',
    active: route.path === '/',
  },
  {
    label: 'Assets',
    to: '/assets/dashboard',
    active: route.path.startsWith('/assets'),
    children: [
      {
        label: 'Dashboard',
        description: '',
        to: '/assets/dashboard',
        active: route.path === '/assets/dashboard'
      },
      {
        label: 'Request',
        to: '/assets/request',
        active: route.path === '/assets/request'
      },
    ],
  },
])

<template>
  <UHeader>
    <UNavigationMenu :items="items"  />
  </UHeader>
</template>

Start by reproducing the provided UHeader and UNavigationMenu example with the nested items. Compare the dropdown width and child-label rendering when UNavigationMenu is placed in UHeader's default slot. Done means the child labels no longer truncate, or the recommended configuration is documented.