fix(Modal): always fullscreen on mobile (#2637)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

Author: sandros94

playground/app/pages/components/modal.vue

@@ -54,7 +54,7 @@ function openModal() {
       <UButton label="Open fullscreen" color="neutral" variant="outline" />
     </UModal>
 
-    <UModal title="Modal prevent close" description="This modal has `prevent-close: true` prop so it won't close when clicking outside." prevent-close>
+    <UModal title="Modal prevent close" description="This modal has `dismissible: false` prop so it won't close when clicking outside." :dismissible="false">
       <UButton label="Open unclosable" color="neutral" variant="subtle" />
     </UModal>
 

playground/app/pages/components/slideover.vue

@@ -98,7 +98,7 @@ function openSlideover() {
       </template>
     </USlideover>
 
-    <USlideover title="Slideover prevent close" description="This slideover has `prevent-close: true` prop so it won't close when clicking outside." prevent-close>
+    <USlideover title="Slideover prevent close" description="This slideover has `dismissible: false` prop so it won't close when clicking outside." :dismissible="false">
       <UButton label="Open unclosable" color="neutral" variant="subtle" />
 
       <template #body>

src/theme/modal.ts

@@ -1,7 +1,7 @@
 export default {
   slots: {
     overlay: 'fixed inset-0 bg-(--ui-bg-elevated)/75',
-    content: 'fixed w-full h-dvh bg-(--ui-bg) divide-y divide-(--ui-border) flex flex-col focus:outline-none',
+    content: 'fixed bg-(--ui-bg) divide-y divide-(--ui-border) flex flex-col focus:outline-none',
     header: 'px-4 py-5 sm:px-6',
     body: 'flex-1 overflow-y-auto p-4 sm:p-6',
     footer: 'flex items-center gap-1.5 p-4 sm:px-6',
@@ -21,7 +21,7 @@ export default {
         content: 'inset-0'
       },
       false: {
-        content: 'top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg sm:h-auto sm:max-h-[calc(100vh-4rem)] sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-(--ui-border)'
+        content: 'top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100vh-2rem)] sm:max-h-[calc(100vh-4rem)] rounded-[calc(var(--ui-radius)*2)] shadow-lg ring ring-(--ui-border)'
       }
     }
   }