@almadar/ui 4.53.3 → 4.53.5

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(
@@ -12713,11 +12713,11 @@ var init_SimpleGrid = __esm({
     };
     colStyles = {
       1: "grid-cols-1",
-      2: "grid-cols-1 sm:grid-cols-2",
-      3: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3",
-      4: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4",
-      5: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5",
-      6: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6"
+      2: "grid-cols-1 sm:grid-cols-2 @max-sm:!grid-cols-1",
+      3: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 @max-md:!grid-cols-2 @max-sm:!grid-cols-1",
+      4: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 @max-lg:!grid-cols-3 @max-md:!grid-cols-2 @max-sm:!grid-cols-1",
+      5: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 @max-xl:!grid-cols-4 @max-lg:!grid-cols-3 @max-md:!grid-cols-2 @max-sm:!grid-cols-1",
+      6: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 @max-xl:!grid-cols-4 @max-lg:!grid-cols-3 @max-md:!grid-cols-2 @max-sm:!grid-cols-1"
     };
     SimpleGrid = ({
       minChildWidth = 250,
@@ -26078,11 +26078,11 @@ function DataGrid({
   const gridTemplateColumns = cols ? void 0 : `repeat(auto-fit, minmax(min(${minCardWidth}px, 100%), 1fr))`;
   const colsClass = cols ? {
     1: "grid-cols-1",
-    2: "sm:grid-cols-2",
-    3: "sm:grid-cols-2 lg:grid-cols-3",
-    4: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",
-    5: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5",
-    6: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6"
+    2: "sm:grid-cols-2 @max-sm:!grid-cols-1",
+    3: "sm:grid-cols-2 lg:grid-cols-3 @max-lg:!grid-cols-2 @max-sm:!grid-cols-1",
+    4: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 @max-xl:!grid-cols-3 @max-lg:!grid-cols-2 @max-sm:!grid-cols-1",
+    5: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 @max-xl:!grid-cols-3 @max-lg:!grid-cols-2 @max-sm:!grid-cols-1",
+    6: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 @max-xl:!grid-cols-3 @max-lg:!grid-cols-2 @max-sm:!grid-cols-1"
   }[cols] : void 0;
   if (isLoading) {
     return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "text-center py-8", children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", color: "secondary", children: t("loading.items") || "Loading..." }) });
@@ -60440,7 +60440,7 @@ var OrbPreviewNodeInner = (props) => {
     Box,
     {
       ref: isExpanded ? void 0 : l1SetNodeRef,
-      className: `rounded-lg border shadow-sm bg-card transition-all duration-200 overflow-hidden relative${isRunning ? " orb-preview-running" : ""}`,
+      className: `@container/preview rounded-lg border shadow-sm bg-card transition-all duration-200 overflow-hidden relative${isRunning ? " orb-preview-running" : ""}`,
       style: {
         borderColor: l1IsOver ? "var(--color-primary)" : borderColor,
         borderWidth: l1IsOver ? "2px" : borderWidth,

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(
@@ -12667,11 +12667,11 @@ var init_SimpleGrid = __esm({
     };
     colStyles = {
       1: "grid-cols-1",
-      2: "grid-cols-1 sm:grid-cols-2",
-      3: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3",
-      4: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4",
-      5: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5",
-      6: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6"
+      2: "grid-cols-1 sm:grid-cols-2 @max-sm:!grid-cols-1",
+      3: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 @max-md:!grid-cols-2 @max-sm:!grid-cols-1",
+      4: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 @max-lg:!grid-cols-3 @max-md:!grid-cols-2 @max-sm:!grid-cols-1",
+      5: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 @max-xl:!grid-cols-4 @max-lg:!grid-cols-3 @max-md:!grid-cols-2 @max-sm:!grid-cols-1",
+      6: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 @max-xl:!grid-cols-4 @max-lg:!grid-cols-3 @max-md:!grid-cols-2 @max-sm:!grid-cols-1"
     };
     SimpleGrid = ({
       minChildWidth = 250,
@@ -26032,11 +26032,11 @@ function DataGrid({
   const gridTemplateColumns = cols ? void 0 : `repeat(auto-fit, minmax(min(${minCardWidth}px, 100%), 1fr))`;
   const colsClass = cols ? {
     1: "grid-cols-1",
-    2: "sm:grid-cols-2",
-    3: "sm:grid-cols-2 lg:grid-cols-3",
-    4: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",
-    5: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5",
-    6: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6"
+    2: "sm:grid-cols-2 @max-sm:!grid-cols-1",
+    3: "sm:grid-cols-2 lg:grid-cols-3 @max-lg:!grid-cols-2 @max-sm:!grid-cols-1",
+    4: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 @max-xl:!grid-cols-3 @max-lg:!grid-cols-2 @max-sm:!grid-cols-1",
+    5: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 @max-xl:!grid-cols-3 @max-lg:!grid-cols-2 @max-sm:!grid-cols-1",
+    6: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 @max-xl:!grid-cols-3 @max-lg:!grid-cols-2 @max-sm:!grid-cols-1"
   }[cols] : void 0;
   if (isLoading) {
     return /* @__PURE__ */ jsx(Box, { className: "text-center py-8", children: /* @__PURE__ */ jsx(Typography, { variant: "body", color: "secondary", children: t("loading.items") || "Loading..." }) });
@@ -60394,7 +60394,7 @@ var OrbPreviewNodeInner = (props) => {
     Box,
     {
       ref: isExpanded ? void 0 : l1SetNodeRef,
-      className: `rounded-lg border shadow-sm bg-card transition-all duration-200 overflow-hidden relative${isRunning ? " orb-preview-running" : ""}`,
+      className: `@container/preview rounded-lg border shadow-sm bg-card transition-all duration-200 overflow-hidden relative${isRunning ? " orb-preview-running" : ""}`,
       style: {
         borderColor: l1IsOver ? "var(--color-primary)" : borderColor,
         borderWidth: l1IsOver ? "2px" : borderWidth,

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(
@@ -6770,11 +6770,11 @@ var init_SimpleGrid = __esm({
     };
     colStyles = {
       1: "grid-cols-1",
-      2: "grid-cols-1 sm:grid-cols-2",
-      3: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3",
-      4: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4",
-      5: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5",
-      6: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6"
+      2: "grid-cols-1 sm:grid-cols-2 @max-sm:!grid-cols-1",
+      3: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 @max-md:!grid-cols-2 @max-sm:!grid-cols-1",
+      4: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 @max-lg:!grid-cols-3 @max-md:!grid-cols-2 @max-sm:!grid-cols-1",
+      5: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 @max-xl:!grid-cols-4 @max-lg:!grid-cols-3 @max-md:!grid-cols-2 @max-sm:!grid-cols-1",
+      6: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 @max-xl:!grid-cols-4 @max-lg:!grid-cols-3 @max-md:!grid-cols-2 @max-sm:!grid-cols-1"
     };
     exports.SimpleGrid = ({
       minChildWidth = 250,
@@ -21245,11 +21245,11 @@ function DataGrid({
   const gridTemplateColumns = cols ? void 0 : `repeat(auto-fit, minmax(min(${minCardWidth}px, 100%), 1fr))`;
   const colsClass = cols ? {
     1: "grid-cols-1",
-    2: "sm:grid-cols-2",
-    3: "sm:grid-cols-2 lg:grid-cols-3",
-    4: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",
-    5: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5",
-    6: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6"
+    2: "sm:grid-cols-2 @max-sm:!grid-cols-1",
+    3: "sm:grid-cols-2 lg:grid-cols-3 @max-lg:!grid-cols-2 @max-sm:!grid-cols-1",
+    4: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 @max-xl:!grid-cols-3 @max-lg:!grid-cols-2 @max-sm:!grid-cols-1",
+    5: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 @max-xl:!grid-cols-3 @max-lg:!grid-cols-2 @max-sm:!grid-cols-1",
+    6: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 @max-xl:!grid-cols-3 @max-lg:!grid-cols-2 @max-sm:!grid-cols-1"
   }[cols] : void 0;
   if (isLoading) {
     return /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: "text-center py-8", children: /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "body", color: "secondary", children: t("loading.items") || "Loading..." }) });

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(
@@ -6724,11 +6724,11 @@ var init_SimpleGrid = __esm({
     };
     colStyles = {
       1: "grid-cols-1",
-      2: "grid-cols-1 sm:grid-cols-2",
-      3: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3",
-      4: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4",
-      5: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5",
-      6: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6"
+      2: "grid-cols-1 sm:grid-cols-2 @max-sm:!grid-cols-1",
+      3: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 @max-md:!grid-cols-2 @max-sm:!grid-cols-1",
+      4: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 @max-lg:!grid-cols-3 @max-md:!grid-cols-2 @max-sm:!grid-cols-1",
+      5: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 @max-xl:!grid-cols-4 @max-lg:!grid-cols-3 @max-md:!grid-cols-2 @max-sm:!grid-cols-1",
+      6: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 @max-xl:!grid-cols-4 @max-lg:!grid-cols-3 @max-md:!grid-cols-2 @max-sm:!grid-cols-1"
     };
     SimpleGrid = ({
       minChildWidth = 250,
@@ -21199,11 +21199,11 @@ function DataGrid({
   const gridTemplateColumns = cols ? void 0 : `repeat(auto-fit, minmax(min(${minCardWidth}px, 100%), 1fr))`;
   const colsClass = cols ? {
     1: "grid-cols-1",
-    2: "sm:grid-cols-2",
-    3: "sm:grid-cols-2 lg:grid-cols-3",
-    4: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",
-    5: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5",
-    6: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6"
+    2: "sm:grid-cols-2 @max-sm:!grid-cols-1",
+    3: "sm:grid-cols-2 lg:grid-cols-3 @max-lg:!grid-cols-2 @max-sm:!grid-cols-1",
+    4: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 @max-xl:!grid-cols-3 @max-lg:!grid-cols-2 @max-sm:!grid-cols-1",
+    5: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 @max-xl:!grid-cols-3 @max-lg:!grid-cols-2 @max-sm:!grid-cols-1",
+    6: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 @max-xl:!grid-cols-3 @max-lg:!grid-cols-2 @max-sm:!grid-cols-1"
   }[cols] : void 0;
   if (isLoading) {
     return /* @__PURE__ */ jsx(Box, { className: "text-center py-8", children: /* @__PURE__ */ jsx(Typography, { variant: "body", color: "secondary", children: t("loading.items") || "Loading..." }) });

package/dist/marketing/index.cjs

@@ -3900,11 +3900,11 @@ var gapStyles2 = {
 };
 var colStyles = {
   1: "grid-cols-1",
-  2: "grid-cols-1 sm:grid-cols-2",
-  3: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3",
-  4: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4",
-  5: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5",
-  6: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6"
+  2: "grid-cols-1 sm:grid-cols-2 @max-sm:!grid-cols-1",
+  3: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 @max-md:!grid-cols-2 @max-sm:!grid-cols-1",
+  4: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 @max-lg:!grid-cols-3 @max-md:!grid-cols-2 @max-sm:!grid-cols-1",
+  5: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 @max-xl:!grid-cols-4 @max-lg:!grid-cols-3 @max-md:!grid-cols-2 @max-sm:!grid-cols-1",
+  6: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 @max-xl:!grid-cols-4 @max-lg:!grid-cols-3 @max-md:!grid-cols-2 @max-sm:!grid-cols-1"
 };
 var SimpleGrid = ({
   minChildWidth = 250,

package/dist/marketing/index.js

@@ -3876,11 +3876,11 @@ var gapStyles2 = {
 };
 var colStyles = {
   1: "grid-cols-1",
-  2: "grid-cols-1 sm:grid-cols-2",
-  3: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3",
-  4: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4",
-  5: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5",
-  6: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6"
+  2: "grid-cols-1 sm:grid-cols-2 @max-sm:!grid-cols-1",
+  3: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 @max-md:!grid-cols-2 @max-sm:!grid-cols-1",
+  4: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 @max-lg:!grid-cols-3 @max-md:!grid-cols-2 @max-sm:!grid-cols-1",
+  5: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 @max-xl:!grid-cols-4 @max-lg:!grid-cols-3 @max-md:!grid-cols-2 @max-sm:!grid-cols-1",
+  6: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 @max-xl:!grid-cols-4 @max-lg:!grid-cols-3 @max-md:!grid-cols-2 @max-sm:!grid-cols-1"
 };
 var SimpleGrid = ({
   minChildWidth = 250,

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(
@@ -8338,11 +8338,11 @@ var init_SimpleGrid = __esm({
     };
     colStyles = {
       1: "grid-cols-1",
-      2: "grid-cols-1 sm:grid-cols-2",
-      3: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3",
-      4: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4",
-      5: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5",
-      6: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6"
+      2: "grid-cols-1 sm:grid-cols-2 @max-sm:!grid-cols-1",
+      3: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 @max-md:!grid-cols-2 @max-sm:!grid-cols-1",
+      4: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 @max-lg:!grid-cols-3 @max-md:!grid-cols-2 @max-sm:!grid-cols-1",
+      5: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 @max-xl:!grid-cols-4 @max-lg:!grid-cols-3 @max-md:!grid-cols-2 @max-sm:!grid-cols-1",
+      6: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 @max-xl:!grid-cols-4 @max-lg:!grid-cols-3 @max-md:!grid-cols-2 @max-sm:!grid-cols-1"
     };
     SimpleGrid = ({
       minChildWidth = 250,
@@ -22490,11 +22490,11 @@ function DataGrid({
   const gridTemplateColumns = cols ? void 0 : `repeat(auto-fit, minmax(min(${minCardWidth}px, 100%), 1fr))`;
   const colsClass = cols ? {
     1: "grid-cols-1",
-    2: "sm:grid-cols-2",
-    3: "sm:grid-cols-2 lg:grid-cols-3",
-    4: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",
-    5: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5",
-    6: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6"
+    2: "sm:grid-cols-2 @max-sm:!grid-cols-1",
+    3: "sm:grid-cols-2 lg:grid-cols-3 @max-lg:!grid-cols-2 @max-sm:!grid-cols-1",
+    4: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 @max-xl:!grid-cols-3 @max-lg:!grid-cols-2 @max-sm:!grid-cols-1",
+    5: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 @max-xl:!grid-cols-3 @max-lg:!grid-cols-2 @max-sm:!grid-cols-1",
+    6: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 @max-xl:!grid-cols-3 @max-lg:!grid-cols-2 @max-sm:!grid-cols-1"
   }[cols] : void 0;
   if (isLoading) {
     return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "text-center py-8", children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", color: "secondary", children: t("loading.items") || "Loading..." }) });

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(
@@ -8292,11 +8292,11 @@ var init_SimpleGrid = __esm({
     };
     colStyles = {
       1: "grid-cols-1",
-      2: "grid-cols-1 sm:grid-cols-2",
-      3: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3",
-      4: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4",
-      5: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5",
-      6: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6"
+      2: "grid-cols-1 sm:grid-cols-2 @max-sm:!grid-cols-1",
+      3: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 @max-md:!grid-cols-2 @max-sm:!grid-cols-1",
+      4: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 @max-lg:!grid-cols-3 @max-md:!grid-cols-2 @max-sm:!grid-cols-1",
+      5: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 @max-xl:!grid-cols-4 @max-lg:!grid-cols-3 @max-md:!grid-cols-2 @max-sm:!grid-cols-1",
+      6: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 @max-xl:!grid-cols-4 @max-lg:!grid-cols-3 @max-md:!grid-cols-2 @max-sm:!grid-cols-1"
     };
     SimpleGrid = ({
       minChildWidth = 250,
@@ -22444,11 +22444,11 @@ function DataGrid({
   const gridTemplateColumns = cols ? void 0 : `repeat(auto-fit, minmax(min(${minCardWidth}px, 100%), 1fr))`;
   const colsClass = cols ? {
     1: "grid-cols-1",
-    2: "sm:grid-cols-2",
-    3: "sm:grid-cols-2 lg:grid-cols-3",
-    4: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",
-    5: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5",
-    6: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6"
+    2: "sm:grid-cols-2 @max-sm:!grid-cols-1",
+    3: "sm:grid-cols-2 lg:grid-cols-3 @max-lg:!grid-cols-2 @max-sm:!grid-cols-1",
+    4: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 @max-xl:!grid-cols-3 @max-lg:!grid-cols-2 @max-sm:!grid-cols-1",
+    5: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 @max-xl:!grid-cols-3 @max-lg:!grid-cols-2 @max-sm:!grid-cols-1",
+    6: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 @max-xl:!grid-cols-3 @max-lg:!grid-cols-2 @max-sm:!grid-cols-1"
   }[cols] : void 0;
   if (isLoading) {
     return /* @__PURE__ */ jsx(Box, { className: "text-center py-8", children: /* @__PURE__ */ jsx(Typography, { variant: "body", color: "secondary", children: t("loading.items") || "Loading..." }) });

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(
@@ -8226,11 +8226,11 @@ var init_SimpleGrid = __esm({
     };
     colStyles = {
       1: "grid-cols-1",
-      2: "grid-cols-1 sm:grid-cols-2",
-      3: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3",
-      4: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4",
-      5: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5",
-      6: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6"
+      2: "grid-cols-1 sm:grid-cols-2 @max-sm:!grid-cols-1",
+      3: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 @max-md:!grid-cols-2 @max-sm:!grid-cols-1",
+      4: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 @max-lg:!grid-cols-3 @max-md:!grid-cols-2 @max-sm:!grid-cols-1",
+      5: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 @max-xl:!grid-cols-4 @max-lg:!grid-cols-3 @max-md:!grid-cols-2 @max-sm:!grid-cols-1",
+      6: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 @max-xl:!grid-cols-4 @max-lg:!grid-cols-3 @max-md:!grid-cols-2 @max-sm:!grid-cols-1"
     };
     SimpleGrid = ({
       minChildWidth = 250,
@@ -22259,11 +22259,11 @@ function DataGrid({
   const gridTemplateColumns = cols ? void 0 : `repeat(auto-fit, minmax(min(${minCardWidth}px, 100%), 1fr))`;
   const colsClass = cols ? {
     1: "grid-cols-1",
-    2: "sm:grid-cols-2",
-    3: "sm:grid-cols-2 lg:grid-cols-3",
-    4: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",
-    5: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5",
-    6: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6"
+    2: "sm:grid-cols-2 @max-sm:!grid-cols-1",
+    3: "sm:grid-cols-2 lg:grid-cols-3 @max-lg:!grid-cols-2 @max-sm:!grid-cols-1",
+    4: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 @max-xl:!grid-cols-3 @max-lg:!grid-cols-2 @max-sm:!grid-cols-1",
+    5: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 @max-xl:!grid-cols-3 @max-lg:!grid-cols-2 @max-sm:!grid-cols-1",
+    6: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 @max-xl:!grid-cols-3 @max-lg:!grid-cols-2 @max-sm:!grid-cols-1"
   }[cols] : void 0;
   if (isLoading) {
     return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "text-center py-8", children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", color: "secondary", children: t("loading.items") || "Loading..." }) });

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(
@@ -8180,11 +8180,11 @@ var init_SimpleGrid = __esm({
     };
     colStyles = {
       1: "grid-cols-1",
-      2: "grid-cols-1 sm:grid-cols-2",
-      3: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3",
-      4: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4",
-      5: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5",
-      6: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6"
+      2: "grid-cols-1 sm:grid-cols-2 @max-sm:!grid-cols-1",
+      3: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 @max-md:!grid-cols-2 @max-sm:!grid-cols-1",
+      4: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 @max-lg:!grid-cols-3 @max-md:!grid-cols-2 @max-sm:!grid-cols-1",
+      5: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 @max-xl:!grid-cols-4 @max-lg:!grid-cols-3 @max-md:!grid-cols-2 @max-sm:!grid-cols-1",
+      6: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 @max-xl:!grid-cols-4 @max-lg:!grid-cols-3 @max-md:!grid-cols-2 @max-sm:!grid-cols-1"
     };
     SimpleGrid = ({
       minChildWidth = 250,
@@ -22213,11 +22213,11 @@ function DataGrid({
   const gridTemplateColumns = cols ? void 0 : `repeat(auto-fit, minmax(min(${minCardWidth}px, 100%), 1fr))`;
   const colsClass = cols ? {
     1: "grid-cols-1",
-    2: "sm:grid-cols-2",
-    3: "sm:grid-cols-2 lg:grid-cols-3",
-    4: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",
-    5: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5",
-    6: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6"
+    2: "sm:grid-cols-2 @max-sm:!grid-cols-1",
+    3: "sm:grid-cols-2 lg:grid-cols-3 @max-lg:!grid-cols-2 @max-sm:!grid-cols-1",
+    4: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 @max-xl:!grid-cols-3 @max-lg:!grid-cols-2 @max-sm:!grid-cols-1",
+    5: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 @max-xl:!grid-cols-3 @max-lg:!grid-cols-2 @max-sm:!grid-cols-1",
+    6: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 @max-xl:!grid-cols-3 @max-lg:!grid-cols-2 @max-sm:!grid-cols-1"
   }[cols] : void 0;
   if (isLoading) {
     return /* @__PURE__ */ jsx(Box, { className: "text-center py-8", children: /* @__PURE__ */ jsx(Typography, { variant: "body", color: "secondary", children: t("loading.items") || "Loading..." }) });

package/package.json

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