[v3] Modal always render fullscreen on mobile

[nklsw]

Environment

MacOS 15.0.1 / Arc 1.63.0
Also tested on iOS 18.0.1 / Safari

Version

v3.0.0-alpha.7

Reproduction

https://ui3.nuxt.dev/components/modal

Description

In version 3.0-alpha, I noticed that modals are now displayed in fullscreen mode on mobile devices / small screens by default. This can be reproduced with the examples in the documentation.

I don't expect this to be intended as default. Also in the first example in the modal documentation it's hard to leave the dialoge, as there is no button for closing.

Additional context

Logs

No response

[gioboa]

Hi, there is the specific example with the close button.
The library is using this dialog and it's taking the full screen too.
@sandros94 do you have any feedback about that?

[sandros94]

By now all the docs example should already include a close button by default, so if we have missed any feel free to call them out! 🙏

The library is using this dialog and it's taking the full screen too.

@gioboa Nuxt UI v2 uses Headless UI under the hood, while v3 is using Radix Vue (soon rebranded as Reka UI) and this is the current dialog component that is being used.

I don't expect this to be intended as default.

Indeed it should not (that's why there's a dedicated fullscreen prop)

[sandros94]

Indeed it should not (that's why there's a dedicated fullscreen prop)

Ah, my bad! It is working as intended.

This is actually a long term debate, all the way back to the beginning of Nuxt UI v2.

The three main proposed variants for mobile/small screens are:

• fullscreen
• in the middle of the screen
• at the bottom of the screen

a definite choice hasn't been picked, yet

In the meantime you could edit your specified modal like so:

<template>
  <UModal
    :ui="{
      content: 'max-w-lg w-[90vw] h-auto rounded-[calc(var(--ui-radius)*2)] shadow-lg ring',
    }"
  >
    <!-- content -->
  </UModal>
</template>

or project wide via app.config.ts

export default defineAppConfig({
  ui: {
    modal: {
      variants: {
        fullscreen: {
          false: {
            content: 'max-w-lg w-[90vw] h-auto rounded-[calc(var(--ui-radius)*2)] shadow-lg ring',
          },
        },
      },
    },
  },
})