diff --git a/src/components/utilities/Modal.vue b/src/components/utilities/Modal.vue
index 586f37e..a0ae7c6 100644
--- a/src/components/utilities/Modal.vue
+++ b/src/components/utilities/Modal.vue
@@ -10,7 +10,7 @@
         width: isFullScreen ? '100%' : `${size.width}px`,
         height: isFullScreen ? '100%' : `${size.height}px`,
       }"
-      class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 shadow-2xl flex flex-col fixed z-50 transition-colors duration-300"
+      class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 shadow-2xl flex flex-col fixed z-50 transition-colors duration-300 max-w-full max-h-full"
       :class="{ 'rounded-none border-0': isFullScreen, 'select-none': isDragging }"
     >
       <!-- Header with drag handle -->
@@ -197,9 +197,12 @@
 
   const centerModal = () => {
     if (!modalRef.value) return;
+    const effectiveWidth = Math.min(size.value.width, window.innerWidth);
+    const effectiveHeight = Math.min(size.value.height, window.innerHeight);
+
     position.value = {
-      x: (window.innerWidth - size.value.width) / 2,
-      y: (window.innerHeight - size.value.height) / 2,
+      x: Math.max(0, (window.innerWidth - effectiveWidth) / 2),
+      y: Math.max(0, (window.innerHeight - effectiveHeight) / 2),
     };
   };