Command Palette appears behind virtual keyboard when inside Modal on mobile devices

[Marfi333]

Environment

• Operating System: Darwin
• Node Version: v22.4.0
• Nuxt Version: 3.12.4
• CLI Version: 3.13.1
• Nitro Version: -
• Package Manager: [email protected]
• Builder: -
• User Config: compatibilityDate, devtools, future, experimental, app, site, sitemap, routeRules, css, colorMode, runtimeConfig, modules, postcss, typescript
• Runtime Modules: [email protected], @nuxt/[email protected], @nuxt/[email protected], @pinia/[email protected], @pinia-plugin-persistedstate/[email protected], @nuxt/[email protected], [email protected], @nuxtjs/[email protected]
• Build Modules: -

Version

v2.18.4

Reproduction

https://ui.nuxt.com/components/command-palette#usage

Description

On mobile devices, when the modal is positioned at the bottom of the screen, the Command Palette becomes obscured by the virtual keyboard. This issue occurs when the Command Palette contains fewer than 6 elements or none at all, making it completely inaccessible for users.

The issue can be reproduced on the official component page:
https://ui.nuxt.com/components/command-palette

Additional context

No response

Logs

No response

[Tragio]

Hi @Marfi333 👋

This is an interesting one.

There is a VirtualKeyboard API that would allow us to do something like height: calc(100vh - env(keyboard-inset-height)) however that is only for Chrome, at the moment. Which is not suitable.

The other possible way would be using Visual Viewport API but then I think we are adding stuff that can bring trouble along the line, only for some small edge cases.

Perhaps by using min-h-0 lg:min-h-full you solve your use case 🤔

<script setup lang="ts">
const isOpen = ref(false)

const people = [
  { id: 1, label: 'Wade Cooper' },
  { id: 2, label: 'Arlene Mccoy' },
  { id: 3, label: 'Devon Webb' },
  { id: 4, label: 'Tom Cook' },
  { id: 5, label: 'Tanya Fox' },
  { id: 6, label: 'Hellen Schmidt' },
  { id: 7, label: 'Caroline Schultz' },
  { id: 8, label: 'Mason Heaney' },
  { id: 9, label: 'Claudie Smitham' },
  { id: 10, label: 'Emil Schaefer' },
]

const selected = ref([])
</script>

<template>
  <div>
    <UButton label="Open" @click="isOpen = true" />

    <UModal
      v-model="isOpen"
      :ui="{
        container: 'min-h-0 lg:min-h-full',
      }"
    >
      <UCommandPalette
        v-model="selected"
        multiple
        nullable
        :groups="[{ key: 'people', commands: people }]"
      />
    </UModal>
  </div>
</template>