UModal gains padding when used on mobile with the fullscreen prop

[KeoneSomers]

Environment

• Operating System: Darwin
• Node Version: v18.17.1
• Nuxt Version: 3.7.4
• CLI Version: 3.9.0
• Nitro Version: 2.6.3
• Package Manager: [email protected]
• Builder: -
• User Config: modules, supabase, colorMode, plugins, typescript, build, css, app, runtimeConfig
• Runtime Modules: @nuxtjs/[email protected], @nuxt/[email protected], @sidebase/[email protected], @nuxt/[email protected], [email protected], @nuxt/[email protected], @vue-final-modal/[email protected]

Version

v2.9.0

Reproduction

https://ui.nuxt.com/overlays/modal#fullscreen

You can simple head to the docs for the fullscreen modal, open the modal and resize the browser to a smaller mobile size and the padding will appear around the modal.

Description

When using the UModal component with the "fullscreen" prop and changing the screen size to mobile using the browser dev tools, the modal gains a p-4 class on the backdrop element that is not normally there when fullscreen is enabled.

This effect only seems to occur on mobile screens and when the screen size is increased the padding is lost and the fullscreen modal looks normal again.

I have also been able to reproduce it on a mobile device and had the same effect.

Due to the extra padding, on mobile the screen agains a scrollbar to account for the extra vertical space.

Additional context

Logs

No response

[benjamincanac]

Thanks for the report 😊

[lisisistemas]

Hi All,
How can I change the width of a UModal component? I´m trying to do this, but no success.
Thanks in advance.

[BillSamaras]

@lisisistemas

You can try to add

<UModal :ui="{ width: 'w-full sm:max-w-3xl' }">

at your UModal.

I had the same issue, but I managed to get through based on the documentation here
https://ui.nuxt.com/getting-started/theming