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>

[ZeroDayZ7]

I also had this problem and this solution helped, but I have a problem with icons, icons are not displayed on mobile device or desktop from githubpages

Localhost Github pages

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

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

    <UModal v-model="isOpen" 
      :ui="{
      container: 'min-h-0 lg:min-h-full'
    }">
      <div class="p-4">
        <div class="flex items-center justify-between">
          <UButton 
            color="white"
            variant="ghost" 
            icon="i-heroicons-x-mark-20-solid" 
            class="-my-1 absolute right-3 top-3 p-1 h-5 w-5"
            @click="isOpen = false"
            loading
            />

        </div>
        <AuthLoginForm />
      </div>
    </UModal>
  </div>
</template>

am I doing something wrong?

[github-actions[bot]]

Hi! 👋

This issue has been automatically closed due to prolonged inactivity.

We're a small team and can't address every report, but we appreciate your feedback and contributions.

If this issue is still relevant with the latest version of Nuxt UI, please feel free to reopen or create a new issue with updated details.

Thank you for your understanding and support!

— Nuxt UI Team