codexly-ui 0.0.61 → 0.0.63

package/fesm2022/codexly-ui.mjs

@@ -5199,10 +5199,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
         }], ctorParameters: () => [] });
 
 const MODAL_SIZE_MAP = {
-    sm: 'w-full max-w-[400px]',
-    md: 'w-full max-w-[600px]',
-    lg: 'w-full max-w-[900px]',
-    full: 'w-screen h-screen max-w-none rounded-none',
+    sm: 'w-full',
+    md: 'w-full',
+    lg: 'w-full',
+    full: 'w-full h-screen rounded-none',
 };
 const MODAL_CONTAINER_CLASS = 'flex flex-col bg-white rounded-2xl shadow-2xl overflow-hidden';
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -9000,23 +9000,26 @@ class ClxModalService {
             afterClosed() { return _afterClosed; },
         };
         const extraClasses = Array.isArray(panelClass) ? panelClass : [panelClass];
+        const sizeMaxWidth = {
+            sm: '400px',
+            md: '600px',
+            lg: '900px',
+            full: '100vw',
+        };
+        const maxWidth = sizeMaxWidth[size] ?? '600px';
         const overlayRef = this._overlay.create(new OverlayConfig({
             hasBackdrop,
             backdropClass: 'clx-modal-backdrop',
             panelClass: extraClasses,
             scrollStrategy: this._overlay.scrollStrategies.block(),
             positionStrategy: this._overlay.position().global().centerHorizontally().centerVertically(),
+            width: `min(calc(100vw - 2rem), ${maxWidth})`,
+            maxWidth: maxWidth,
+            maxHeight: '90vh',
         }));
         Object.assign(overlayRef.overlayElement.style, {
-            position: 'fixed',
-            inset: '0',
-            width: '100vw',
-            height: '100vh',
             display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            padding: '1rem',
-            boxSizing: 'border-box',
+            flexDirection: 'column',
         });
         const innerInjector = Injector.create({
             parent: this._injector,