diff --git a/src/runtime/components/overlays/Modal.vue b/src/runtime/components/overlays/Modal.vue
index 1c346cfdc7..5b8f084598 100644
--- a/src/runtime/components/overlays/Modal.vue
+++ b/src/runtime/components/overlays/Modal.vue
@@ -91,10 +91,7 @@ const props = defineProps({
   },
   widthClass: {
     type: String,
-    default: () => $ui.modal.width,
-    validator (value: string) {
-      return ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl', '7xl'].map(width => `max-w-${width}`).includes(value)
-    }
+    default: () => $ui.modal.width
   }
 })
 
@@ -112,11 +109,11 @@ const isOpen = computed({
 const modalClass = computed(() => {
   return classNames(
     props.baseClass,
-        `sm:${props.widthClass}`,
-        props.backgroundClass,
-        props.shadowClass,
-        props.ringClass,
-        props.roundedClass
+    props.widthClass,
+    props.backgroundClass,
+    props.shadowClass,
+    props.ringClass,
+    props.roundedClass
   )
 })
 
diff --git a/src/runtime/presets/default.ts b/src/runtime/presets/default.ts
index 7cc856d9ce..81b00fe9b5 100644
--- a/src/runtime/presets/default.ts
+++ b/src/runtime/presets/default.ts
@@ -237,7 +237,7 @@ const modal = {
   ring: '',
   rounded: 'rounded-lg',
   shadow: 'shadow-xl',
-  width: 'max-w-lg'
+  width: 'sm:max-w-lg'
 }
 
 const container = {