@almadar/ui 4.53.2 → 4.53.4

package/dist/avl/index.cjs

@@ -6005,7 +6005,7 @@ var init_Overlay = __esm({
     };
   }
 });
-var sizeClasses2, minWidths, Modal;
+var sizeClasses2, minWidthClasses, Modal;
 var init_Modal = __esm({
   "components/molecules/Modal.tsx"() {
     "use client";
@@ -6023,12 +6023,12 @@ var init_Modal = __esm({
       xl: "max-w-5xl",
       full: "max-w-full mx-4"
     };
-    minWidths = {
-      sm: "400px",
-      md: "520px",
-      lg: "600px",
-      xl: "700px",
-      full: "0"
+    minWidthClasses = {
+      sm: "min-w-[400px] max-sm:min-w-0",
+      md: "min-w-[520px] max-sm:min-w-0",
+      lg: "min-w-[600px] max-sm:min-w-0",
+      xl: "min-w-[700px] max-sm:min-w-0",
+      full: "min-w-0"
     };
     Modal = ({
       isOpen = true,
@@ -6108,10 +6108,9 @@ var init_Modal = __esm({
           {
             className: cn(
               "fixed inset-0 z-50 pointer-events-none",
-              "flex items-start justify-center px-4 pb-4",
-              "max-sm:items-end max-sm:p-0"
+              "flex items-start justify-center px-4 pb-4 pt-[10vh]",
+              "max-sm:items-stretch max-sm:p-0 max-sm:pt-0"
             ),
-            style: { paddingTop: "10vh" },
             children: /* @__PURE__ */ jsxRuntime.jsxs(
               Dialog,
               {
@@ -6122,18 +6121,19 @@ var init_Modal = __esm({
                   "m-0 p-0 border-0 bg-transparent",
                   // Pre-existing dialog frame
                   "pointer-events-auto w-full flex flex-col bg-surface border shadow-lg rounded-md",
+                  // Desktop sizing + viewport-aware floor.
                   sizeClasses2[size],
-                  "max-sm:max-w-full max-sm:min-w-0 max-sm:rounded-b-none max-sm:rounded-t-2xl",
+                  minWidthClasses[size],
+                  "max-h-[80vh]",
+                  // Mobile: take the entire screen. Override desktop max-w cap,
+                  // full height, no rounded corners, no min-width.
+                  "max-sm:max-w-none max-sm:max-h-none max-sm:w-full max-sm:h-full max-sm:rounded-none",
                   className
                 ),
-                style: {
-                  minWidth: minWidths[size],
-                  maxHeight: "80vh",
-                  ...dragY > 0 && {
-                    transform: `translateY(${dragY}px)`,
-                    transition: isDragging.current ? "none" : "transform 200ms ease-out"
-                  }
-                },
+                style: dragY > 0 ? {
+                  transform: `translateY(${dragY}px)`,
+                  transition: isDragging.current ? "none" : "transform 200ms ease-out"
+                } : void 0,
                 ...title && { "aria-labelledby": "modal-title" },
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx(
@@ -61182,7 +61182,7 @@ function OrbInspector({ node, schema, editable = false, userType = "builder", th
     eventBus.emit("UI:REMOVE_EFFECT", { effectIndex });
   }, [eventBus]);
   const headerTitle = selectedPattern ? selectedPattern.patternType : isExpanded ? transitionEvent || "Transition" : orbitalName;
-  return /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "flex flex-col bg-card border-l border-border h-full", style: { width: 340 }, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "flex flex-col bg-card border-l border-border h-full w-full sm:w-[340px]", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "shrink-0 border-b border-border", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "flex items-center justify-between px-4 py-2", children: [
         /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex items-center gap-2", children: selectedPattern ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -62011,18 +62011,27 @@ function FlowCanvasInner({
             }
           )
         ] }),
-        selectedNode && /* @__PURE__ */ jsxRuntime.jsx(
-          OrbInspector,
-          {
-            node: selectedNode,
-            schema: parsedSchema,
-            editable,
-            userType,
-            themeManifest,
-            onSchemaChange,
-            onClose: handleClosePanel
-          }
-        )
+        selectedNode && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Box,
+            {
+              className: "fixed inset-0 bg-foreground/40 z-40 lg:hidden",
+              onClick: handleClosePanel
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "fixed inset-y-0 right-0 z-50 max-w-full lg:static lg:z-auto lg:max-w-none lg:flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+            OrbInspector,
+            {
+              node: selectedNode,
+              schema: parsedSchema,
+              editable,
+              userType,
+              themeManifest,
+              onSchemaChange,
+              onClose: handleClosePanel
+            }
+          ) })
+        ] })
       ]
     }
   ) }) });

package/dist/avl/index.js

@@ -5959,7 +5959,7 @@ var init_Overlay = __esm({
     };
   }
 });
-var sizeClasses2, minWidths, Modal;
+var sizeClasses2, minWidthClasses, Modal;
 var init_Modal = __esm({
   "components/molecules/Modal.tsx"() {
     "use client";
@@ -5977,12 +5977,12 @@ var init_Modal = __esm({
       xl: "max-w-5xl",
       full: "max-w-full mx-4"
     };
-    minWidths = {
-      sm: "400px",
-      md: "520px",
-      lg: "600px",
-      xl: "700px",
-      full: "0"
+    minWidthClasses = {
+      sm: "min-w-[400px] max-sm:min-w-0",
+      md: "min-w-[520px] max-sm:min-w-0",
+      lg: "min-w-[600px] max-sm:min-w-0",
+      xl: "min-w-[700px] max-sm:min-w-0",
+      full: "min-w-0"
     };
     Modal = ({
       isOpen = true,
@@ -6062,10 +6062,9 @@ var init_Modal = __esm({
           {
             className: cn(
               "fixed inset-0 z-50 pointer-events-none",
-              "flex items-start justify-center px-4 pb-4",
-              "max-sm:items-end max-sm:p-0"
+              "flex items-start justify-center px-4 pb-4 pt-[10vh]",
+              "max-sm:items-stretch max-sm:p-0 max-sm:pt-0"
             ),
-            style: { paddingTop: "10vh" },
             children: /* @__PURE__ */ jsxs(
               Dialog,
               {
@@ -6076,18 +6075,19 @@ var init_Modal = __esm({
                   "m-0 p-0 border-0 bg-transparent",
                   // Pre-existing dialog frame
                   "pointer-events-auto w-full flex flex-col bg-surface border shadow-lg rounded-md",
+                  // Desktop sizing + viewport-aware floor.
                   sizeClasses2[size],
-                  "max-sm:max-w-full max-sm:min-w-0 max-sm:rounded-b-none max-sm:rounded-t-2xl",
+                  minWidthClasses[size],
+                  "max-h-[80vh]",
+                  // Mobile: take the entire screen. Override desktop max-w cap,
+                  // full height, no rounded corners, no min-width.
+                  "max-sm:max-w-none max-sm:max-h-none max-sm:w-full max-sm:h-full max-sm:rounded-none",
                   className
                 ),
-                style: {
-                  minWidth: minWidths[size],
-                  maxHeight: "80vh",
-                  ...dragY > 0 && {
-                    transform: `translateY(${dragY}px)`,
-                    transition: isDragging.current ? "none" : "transform 200ms ease-out"
-                  }
-                },
+                style: dragY > 0 ? {
+                  transform: `translateY(${dragY}px)`,
+                  transition: isDragging.current ? "none" : "transform 200ms ease-out"
+                } : void 0,
                 ...title && { "aria-labelledby": "modal-title" },
                 children: [
                   /* @__PURE__ */ jsx(
@@ -61136,7 +61136,7 @@ function OrbInspector({ node, schema, editable = false, userType = "builder", th
     eventBus.emit("UI:REMOVE_EFFECT", { effectIndex });
   }, [eventBus]);
   const headerTitle = selectedPattern ? selectedPattern.patternType : isExpanded ? transitionEvent || "Transition" : orbitalName;
-  return /* @__PURE__ */ jsxs(Box, { className: "flex flex-col bg-card border-l border-border h-full", style: { width: 340 }, children: [
+  return /* @__PURE__ */ jsxs(Box, { className: "flex flex-col bg-card border-l border-border h-full w-full sm:w-[340px]", children: [
     /* @__PURE__ */ jsxs(Box, { className: "shrink-0 border-b border-border", children: [
       /* @__PURE__ */ jsxs(Box, { className: "flex items-center justify-between px-4 py-2", children: [
         /* @__PURE__ */ jsx(Box, { className: "flex items-center gap-2", children: selectedPattern ? /* @__PURE__ */ jsx(
@@ -61965,18 +61965,27 @@ function FlowCanvasInner({
             }
           )
         ] }),
-        selectedNode && /* @__PURE__ */ jsx(
-          OrbInspector,
-          {
-            node: selectedNode,
-            schema: parsedSchema,
-            editable,
-            userType,
-            themeManifest,
-            onSchemaChange,
-            onClose: handleClosePanel
-          }
-        )
+        selectedNode && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              className: "fixed inset-0 bg-foreground/40 z-40 lg:hidden",
+              onClick: handleClosePanel
+            }
+          ),
+          /* @__PURE__ */ jsx(Box, { className: "fixed inset-y-0 right-0 z-50 max-w-full lg:static lg:z-auto lg:max-w-none lg:flex-shrink-0", children: /* @__PURE__ */ jsx(
+            OrbInspector,
+            {
+              node: selectedNode,
+              schema: parsedSchema,
+              editable,
+              userType,
+              themeManifest,
+              onSchemaChange,
+              onClose: handleClosePanel
+            }
+          ) })
+        ] })
       ]
     }
   ) }) });

package/dist/components/index.cjs

@@ -5422,7 +5422,7 @@ var init_EntitySchemaContext = __esm({
     EntitySchemaContext = React78.createContext(null);
   }
 });
-var sizeClasses5, minWidths; exports.Modal = void 0;
+var sizeClasses5, minWidthClasses; exports.Modal = void 0;
 var init_Modal = __esm({
   "components/molecules/Modal.tsx"() {
     "use client";
@@ -5440,12 +5440,12 @@ var init_Modal = __esm({
       xl: "max-w-5xl",
       full: "max-w-full mx-4"
     };
-    minWidths = {
-      sm: "400px",
-      md: "520px",
-      lg: "600px",
-      xl: "700px",
-      full: "0"
+    minWidthClasses = {
+      sm: "min-w-[400px] max-sm:min-w-0",
+      md: "min-w-[520px] max-sm:min-w-0",
+      lg: "min-w-[600px] max-sm:min-w-0",
+      xl: "min-w-[700px] max-sm:min-w-0",
+      full: "min-w-0"
     };
     exports.Modal = ({
       isOpen = true,
@@ -5525,10 +5525,9 @@ var init_Modal = __esm({
           {
             className: cn(
               "fixed inset-0 z-50 pointer-events-none",
-              "flex items-start justify-center px-4 pb-4",
-              "max-sm:items-end max-sm:p-0"
+              "flex items-start justify-center px-4 pb-4 pt-[10vh]",
+              "max-sm:items-stretch max-sm:p-0 max-sm:pt-0"
             ),
-            style: { paddingTop: "10vh" },
             children: /* @__PURE__ */ jsxRuntime.jsxs(
               exports.Dialog,
               {
@@ -5539,18 +5538,19 @@ var init_Modal = __esm({
                   "m-0 p-0 border-0 bg-transparent",
                   // Pre-existing dialog frame
                   "pointer-events-auto w-full flex flex-col bg-surface border shadow-lg rounded-md",
+                  // Desktop sizing + viewport-aware floor.
                   sizeClasses5[size],
-                  "max-sm:max-w-full max-sm:min-w-0 max-sm:rounded-b-none max-sm:rounded-t-2xl",
+                  minWidthClasses[size],
+                  "max-h-[80vh]",
+                  // Mobile: take the entire screen. Override desktop max-w cap,
+                  // full height, no rounded corners, no min-width.
+                  "max-sm:max-w-none max-sm:max-h-none max-sm:w-full max-sm:h-full max-sm:rounded-none",
                   className
                 ),
-                style: {
-                  minWidth: minWidths[size],
-                  maxHeight: "80vh",
-                  ...dragY > 0 && {
-                    transform: `translateY(${dragY}px)`,
-                    transition: isDragging.current ? "none" : "transform 200ms ease-out"
-                  }
-                },
+                style: dragY > 0 ? {
+                  transform: `translateY(${dragY}px)`,
+                  transition: isDragging.current ? "none" : "transform 200ms ease-out"
+                } : void 0,
                 ...title && { "aria-labelledby": "modal-title" },
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx(

package/dist/components/index.js

@@ -5376,7 +5376,7 @@ var init_EntitySchemaContext = __esm({
     EntitySchemaContext = createContext(null);
   }
 });
-var sizeClasses5, minWidths, Modal;
+var sizeClasses5, minWidthClasses, Modal;
 var init_Modal = __esm({
   "components/molecules/Modal.tsx"() {
     "use client";
@@ -5394,12 +5394,12 @@ var init_Modal = __esm({
       xl: "max-w-5xl",
       full: "max-w-full mx-4"
     };
-    minWidths = {
-      sm: "400px",
-      md: "520px",
-      lg: "600px",
-      xl: "700px",
-      full: "0"
+    minWidthClasses = {
+      sm: "min-w-[400px] max-sm:min-w-0",
+      md: "min-w-[520px] max-sm:min-w-0",
+      lg: "min-w-[600px] max-sm:min-w-0",
+      xl: "min-w-[700px] max-sm:min-w-0",
+      full: "min-w-0"
     };
     Modal = ({
       isOpen = true,
@@ -5479,10 +5479,9 @@ var init_Modal = __esm({
           {
             className: cn(
               "fixed inset-0 z-50 pointer-events-none",
-              "flex items-start justify-center px-4 pb-4",
-              "max-sm:items-end max-sm:p-0"
+              "flex items-start justify-center px-4 pb-4 pt-[10vh]",
+              "max-sm:items-stretch max-sm:p-0 max-sm:pt-0"
             ),
-            style: { paddingTop: "10vh" },
             children: /* @__PURE__ */ jsxs(
               Dialog,
               {
@@ -5493,18 +5492,19 @@ var init_Modal = __esm({
                   "m-0 p-0 border-0 bg-transparent",
                   // Pre-existing dialog frame
                   "pointer-events-auto w-full flex flex-col bg-surface border shadow-lg rounded-md",
+                  // Desktop sizing + viewport-aware floor.
                   sizeClasses5[size],
-                  "max-sm:max-w-full max-sm:min-w-0 max-sm:rounded-b-none max-sm:rounded-t-2xl",
+                  minWidthClasses[size],
+                  "max-h-[80vh]",
+                  // Mobile: take the entire screen. Override desktop max-w cap,
+                  // full height, no rounded corners, no min-width.
+                  "max-sm:max-w-none max-sm:max-h-none max-sm:w-full max-sm:h-full max-sm:rounded-none",
                   className
                 ),
-                style: {
-                  minWidth: minWidths[size],
-                  maxHeight: "80vh",
-                  ...dragY > 0 && {
-                    transform: `translateY(${dragY}px)`,
-                    transition: isDragging.current ? "none" : "transform 200ms ease-out"
-                  }
-                },
+                style: dragY > 0 ? {
+                  transform: `translateY(${dragY}px)`,
+                  transition: isDragging.current ? "none" : "transform 200ms ease-out"
+                } : void 0,
                 ...title && { "aria-labelledby": "modal-title" },
                 children: [
                   /* @__PURE__ */ jsx(

package/dist/providers/index.cjs

@@ -1190,7 +1190,7 @@ var init_Overlay = __esm({
     };
   }
 });
-var sizeClasses2, minWidths, Modal;
+var sizeClasses2, minWidthClasses, Modal;
 var init_Modal = __esm({
   "components/molecules/Modal.tsx"() {
     "use client";
@@ -1208,12 +1208,12 @@ var init_Modal = __esm({
       xl: "max-w-5xl",
       full: "max-w-full mx-4"
     };
-    minWidths = {
-      sm: "400px",
-      md: "520px",
-      lg: "600px",
-      xl: "700px",
-      full: "0"
+    minWidthClasses = {
+      sm: "min-w-[400px] max-sm:min-w-0",
+      md: "min-w-[520px] max-sm:min-w-0",
+      lg: "min-w-[600px] max-sm:min-w-0",
+      xl: "min-w-[700px] max-sm:min-w-0",
+      full: "min-w-0"
     };
     Modal = ({
       isOpen = true,
@@ -1293,10 +1293,9 @@ var init_Modal = __esm({
           {
             className: cn(
               "fixed inset-0 z-50 pointer-events-none",
-              "flex items-start justify-center px-4 pb-4",
-              "max-sm:items-end max-sm:p-0"
+              "flex items-start justify-center px-4 pb-4 pt-[10vh]",
+              "max-sm:items-stretch max-sm:p-0 max-sm:pt-0"
             ),
-            style: { paddingTop: "10vh" },
             children: /* @__PURE__ */ jsxRuntime.jsxs(
               Dialog,
               {
@@ -1307,18 +1306,19 @@ var init_Modal = __esm({
                   "m-0 p-0 border-0 bg-transparent",
                   // Pre-existing dialog frame
                   "pointer-events-auto w-full flex flex-col bg-surface border shadow-lg rounded-md",
+                  // Desktop sizing + viewport-aware floor.
                   sizeClasses2[size],
-                  "max-sm:max-w-full max-sm:min-w-0 max-sm:rounded-b-none max-sm:rounded-t-2xl",
+                  minWidthClasses[size],
+                  "max-h-[80vh]",
+                  // Mobile: take the entire screen. Override desktop max-w cap,
+                  // full height, no rounded corners, no min-width.
+                  "max-sm:max-w-none max-sm:max-h-none max-sm:w-full max-sm:h-full max-sm:rounded-none",
                   className
                 ),
-                style: {
-                  minWidth: minWidths[size],
-                  maxHeight: "80vh",
-                  ...dragY > 0 && {
-                    transform: `translateY(${dragY}px)`,
-                    transition: isDragging.current ? "none" : "transform 200ms ease-out"
-                  }
-                },
+                style: dragY > 0 ? {
+                  transform: `translateY(${dragY}px)`,
+                  transition: isDragging.current ? "none" : "transform 200ms ease-out"
+                } : void 0,
                 ...title && { "aria-labelledby": "modal-title" },
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx(

package/dist/providers/index.js

@@ -1144,7 +1144,7 @@ var init_Overlay = __esm({
     };
   }
 });
-var sizeClasses2, minWidths, Modal;
+var sizeClasses2, minWidthClasses, Modal;
 var init_Modal = __esm({
   "components/molecules/Modal.tsx"() {
     "use client";
@@ -1162,12 +1162,12 @@ var init_Modal = __esm({
       xl: "max-w-5xl",
       full: "max-w-full mx-4"
     };
-    minWidths = {
-      sm: "400px",
-      md: "520px",
-      lg: "600px",
-      xl: "700px",
-      full: "0"
+    minWidthClasses = {
+      sm: "min-w-[400px] max-sm:min-w-0",
+      md: "min-w-[520px] max-sm:min-w-0",
+      lg: "min-w-[600px] max-sm:min-w-0",
+      xl: "min-w-[700px] max-sm:min-w-0",
+      full: "min-w-0"
     };
     Modal = ({
       isOpen = true,
@@ -1247,10 +1247,9 @@ var init_Modal = __esm({
           {
             className: cn(
               "fixed inset-0 z-50 pointer-events-none",
-              "flex items-start justify-center px-4 pb-4",
-              "max-sm:items-end max-sm:p-0"
+              "flex items-start justify-center px-4 pb-4 pt-[10vh]",
+              "max-sm:items-stretch max-sm:p-0 max-sm:pt-0"
             ),
-            style: { paddingTop: "10vh" },
             children: /* @__PURE__ */ jsxs(
               Dialog,
               {
@@ -1261,18 +1260,19 @@ var init_Modal = __esm({
                   "m-0 p-0 border-0 bg-transparent",
                   // Pre-existing dialog frame
                   "pointer-events-auto w-full flex flex-col bg-surface border shadow-lg rounded-md",
+                  // Desktop sizing + viewport-aware floor.
                   sizeClasses2[size],
-                  "max-sm:max-w-full max-sm:min-w-0 max-sm:rounded-b-none max-sm:rounded-t-2xl",
+                  minWidthClasses[size],
+                  "max-h-[80vh]",
+                  // Mobile: take the entire screen. Override desktop max-w cap,
+                  // full height, no rounded corners, no min-width.
+                  "max-sm:max-w-none max-sm:max-h-none max-sm:w-full max-sm:h-full max-sm:rounded-none",
                   className
                 ),
-                style: {
-                  minWidth: minWidths[size],
-                  maxHeight: "80vh",
-                  ...dragY > 0 && {
-                    transform: `translateY(${dragY}px)`,
-                    transition: isDragging.current ? "none" : "transform 200ms ease-out"
-                  }
-                },
+                style: dragY > 0 ? {
+                  transform: `translateY(${dragY}px)`,
+                  transition: isDragging.current ? "none" : "transform 200ms ease-out"
+                } : void 0,
                 ...title && { "aria-labelledby": "modal-title" },
                 children: [
                   /* @__PURE__ */ jsx(

package/dist/runtime/index.cjs

@@ -1474,7 +1474,7 @@ var init_Overlay = __esm({
     };
   }
 });
-var sizeClasses2, minWidths, Modal;
+var sizeClasses2, minWidthClasses, Modal;
 var init_Modal = __esm({
   "components/molecules/Modal.tsx"() {
     "use client";
@@ -1492,12 +1492,12 @@ var init_Modal = __esm({
       xl: "max-w-5xl",
       full: "max-w-full mx-4"
     };
-    minWidths = {
-      sm: "400px",
-      md: "520px",
-      lg: "600px",
-      xl: "700px",
-      full: "0"
+    minWidthClasses = {
+      sm: "min-w-[400px] max-sm:min-w-0",
+      md: "min-w-[520px] max-sm:min-w-0",
+      lg: "min-w-[600px] max-sm:min-w-0",
+      xl: "min-w-[700px] max-sm:min-w-0",
+      full: "min-w-0"
     };
     Modal = ({
       isOpen = true,
@@ -1577,10 +1577,9 @@ var init_Modal = __esm({
           {
             className: cn(
               "fixed inset-0 z-50 pointer-events-none",
-              "flex items-start justify-center px-4 pb-4",
-              "max-sm:items-end max-sm:p-0"
+              "flex items-start justify-center px-4 pb-4 pt-[10vh]",
+              "max-sm:items-stretch max-sm:p-0 max-sm:pt-0"
             ),
-            style: { paddingTop: "10vh" },
             children: /* @__PURE__ */ jsxRuntime.jsxs(
               Dialog,
               {
@@ -1591,18 +1590,19 @@ var init_Modal = __esm({
                   "m-0 p-0 border-0 bg-transparent",
                   // Pre-existing dialog frame
                   "pointer-events-auto w-full flex flex-col bg-surface border shadow-lg rounded-md",
+                  // Desktop sizing + viewport-aware floor.
                   sizeClasses2[size],
-                  "max-sm:max-w-full max-sm:min-w-0 max-sm:rounded-b-none max-sm:rounded-t-2xl",
+                  minWidthClasses[size],
+                  "max-h-[80vh]",
+                  // Mobile: take the entire screen. Override desktop max-w cap,
+                  // full height, no rounded corners, no min-width.
+                  "max-sm:max-w-none max-sm:max-h-none max-sm:w-full max-sm:h-full max-sm:rounded-none",
                   className
                 ),
-                style: {
-                  minWidth: minWidths[size],
-                  maxHeight: "80vh",
-                  ...dragY > 0 && {
-                    transform: `translateY(${dragY}px)`,
-                    transition: isDragging.current ? "none" : "transform 200ms ease-out"
-                  }
-                },
+                style: dragY > 0 ? {
+                  transform: `translateY(${dragY}px)`,
+                  transition: isDragging.current ? "none" : "transform 200ms ease-out"
+                } : void 0,
                 ...title && { "aria-labelledby": "modal-title" },
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx(

package/dist/runtime/index.js

@@ -1428,7 +1428,7 @@ var init_Overlay = __esm({
     };
   }
 });
-var sizeClasses2, minWidths, Modal;
+var sizeClasses2, minWidthClasses, Modal;
 var init_Modal = __esm({
   "components/molecules/Modal.tsx"() {
     "use client";
@@ -1446,12 +1446,12 @@ var init_Modal = __esm({
       xl: "max-w-5xl",
       full: "max-w-full mx-4"
     };
-    minWidths = {
-      sm: "400px",
-      md: "520px",
-      lg: "600px",
-      xl: "700px",
-      full: "0"
+    minWidthClasses = {
+      sm: "min-w-[400px] max-sm:min-w-0",
+      md: "min-w-[520px] max-sm:min-w-0",
+      lg: "min-w-[600px] max-sm:min-w-0",
+      xl: "min-w-[700px] max-sm:min-w-0",
+      full: "min-w-0"
     };
     Modal = ({
       isOpen = true,
@@ -1531,10 +1531,9 @@ var init_Modal = __esm({
           {
             className: cn(
               "fixed inset-0 z-50 pointer-events-none",
-              "flex items-start justify-center px-4 pb-4",
-              "max-sm:items-end max-sm:p-0"
+              "flex items-start justify-center px-4 pb-4 pt-[10vh]",
+              "max-sm:items-stretch max-sm:p-0 max-sm:pt-0"
             ),
-            style: { paddingTop: "10vh" },
             children: /* @__PURE__ */ jsxs(
               Dialog,
               {
@@ -1545,18 +1544,19 @@ var init_Modal = __esm({
                   "m-0 p-0 border-0 bg-transparent",
                   // Pre-existing dialog frame
                   "pointer-events-auto w-full flex flex-col bg-surface border shadow-lg rounded-md",
+                  // Desktop sizing + viewport-aware floor.
                   sizeClasses2[size],
-                  "max-sm:max-w-full max-sm:min-w-0 max-sm:rounded-b-none max-sm:rounded-t-2xl",
+                  minWidthClasses[size],
+                  "max-h-[80vh]",
+                  // Mobile: take the entire screen. Override desktop max-w cap,
+                  // full height, no rounded corners, no min-width.
+                  "max-sm:max-w-none max-sm:max-h-none max-sm:w-full max-sm:h-full max-sm:rounded-none",
                   className
                 ),
-                style: {
-                  minWidth: minWidths[size],
-                  maxHeight: "80vh",
-                  ...dragY > 0 && {
-                    transform: `translateY(${dragY}px)`,
-                    transition: isDragging.current ? "none" : "transform 200ms ease-out"
-                  }
-                },
+                style: dragY > 0 ? {
+                  transform: `translateY(${dragY}px)`,
+                  transition: isDragging.current ? "none" : "transform 200ms ease-out"
+                } : void 0,
                 ...title && { "aria-labelledby": "modal-title" },
                 children: [
                   /* @__PURE__ */ jsx(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "4.53.2",
+  "version": "4.53.4",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "sideEffects": [