UModal gains padding when used on mobile with the fullscreen prop

KeoneSomers commented 7 months ago

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: npm@9.6.7
Builder: -
User Config: modules, supabase, colorMode, plugins, typescript, build, css, app, runtimeConfig
Runtime Modules: @nuxtjs/supabase@1.1.3, @nuxt/image-edge@1.0.0-rc.3-28282346.a10323e, @sidebase/nuxt-pdf@0.1.1, @nuxt/devtools@0.8.5, nuxt-icon@0.4.2, @nuxt/ui@2.9.0, @vue-final-modal/nuxt@1.0.0

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 commented 7 months ago

Thanks for the report 😊

lisisistemas commented 1 month ago

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 commented 2 weeks ago

@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

nuxt / ui