fix(Modal): prevent from going out of screen

Resolves #2711
nuxt · Dec 6, 2024 · b7ba2c7 · b7ba2c7
1 parent 198d04d
commit b7ba2c7
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 38 deletions.
diff --git a/src/theme/modal.ts b/src/theme/modal.ts
@@ -3,7 +3,7 @@ export default {
     overlay: 'fixed inset-0 bg-[var(--ui-bg-elevated)]/75',
     content: 'fixed w-full h-dvh bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none',
     header: 'px-4 py-5 sm:px-6',
-    body: 'flex-1 p-4 sm:p-6',
+    body: 'flex-1 overflow-y-auto p-4 sm:p-6',
     footer: 'flex items-center gap-1.5 p-4 sm:px-6',
     title: 'text-[var(--ui-text-highlighted)] font-semibold',
     description: 'mt-1 text-[var(--ui-text-muted)] text-sm',
@@ -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:my-8 sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-[var(--ui-border)]'
+        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-[var(--ui-border)]'
       }
     }
   }