Nuxt UI Navbar Width Breaks on Small Screen

<template>
  <nav class="w-full bg-neutral-800 dark:bg-neutral-950">
    <UContainer class="relative flex items-center justify-between">
      <NuxtLink to="/" class="text-primary py-5 text-4xl font-bold">
        Website
      </NuxtLink>
      <!-- Desktop Navigation (hidden on mobile) -->
      <UNavigationMenu
        :items="navigationItems"
        variant="pill"
        highlight
        highlight-color="primary"
        :ui="NavbarUI"
        class="hidden lg:flex"
      />
      <div class="flex items-center gap-1">
        <ThemeCustomizer />
        <DarkmodeToggle />
        <UButton to="/login" variant="outline"> Log In </UButton>
        <!-- Hamburger Menu Button (visible on mobile) -->
        <UButton
          variant="ghost"
          size="lg"
          class="text-white lg:hidden"
          @click="isMenuOpen = !isMenuOpen"
        >
          <UIcon
            :name="isMenuOpen ? 'i-lucide-x' : 'i-lucide-menu'"
            class="h-6 w-6"
          />
        </UButton>
      </div>
      <!-- Mobile Navigation Menu -->
      <div
        v-if="isMenuOpen"
        class="absolute top-full right-0 border-t-4 border-neutral-400 bg-neutral-800 lg:hidden dark:bg-neutral-950"
      >
        <UContainer class="py-4">
          <nav class="flex flex-col space-y-2">
            <NuxtLink
              v-for="item in navigationItems"
              :key="item.label"
              :to="item.to"
              class="hover:text-primary rounded-md px-4 py-2 text-white transition-colors"
              @click="isMenuOpen = false"
            >
              {{ item.label }}
            </NuxtLink>
          </nav>
        </UContainer>
      </div>
    </UContainer>
  </nav>
</template>

<template>
  <nav class="w-full bg-neutral-800 dark:bg-neutral-950">
    <UContainer class="relative flex items-center justify-between">
      <NuxtLink to="/" class="text-primary py-5 text-4xl font-bold">
        Website
      </NuxtLink>
      <!-- Desktop Navigation (hidden on mobile) -->
      <UNavigationMenu
        :items="navigationItems"
        variant="pill"
        highlight
        highlight-color="primary"
        :ui="NavbarUI"
        class="hidden lg:flex"
      />
      <div class="flex items-center gap-1">
        <ThemeCustomizer />
        <DarkmodeToggle />
        <UButton to="/login" variant="outline"> Log In </UButton>
        <!-- Hamburger Menu Button (visible on mobile) -->
        <UButton
          variant="ghost"
          size="lg"
          class="text-white lg:hidden"
          @click="isMenuOpen = !isMenuOpen"
        >
          <UIcon
            :name="isMenuOpen ? 'i-lucide-x' : 'i-lucide-menu'"
            class="h-6 w-6"
          />
        </UButton>
      </div>
      <!-- Mobile Navigation Menu -->
      <div
        v-if="isMenuOpen"
        class="absolute top-full right-0 border-t-4 border-neutral-400 bg-neutral-800 lg:hidden dark:bg-neutral-950"
      >
        <UContainer class="py-4">
          <nav class="flex flex-col space-y-2">
            <NuxtLink
              v-for="item in navigationItems"
              :key="item.label"
              :to="item.to"
              class="hover:text-primary rounded-md px-4 py-2 text-white transition-colors"
              @click="isMenuOpen = false"
            >
              {{ item.label }}
            </NuxtLink>
          </nav>
        </UContainer>
      </div>
    </UContainer>
  </nav>
</template>