@delmaredigital/payload-puck 0.6.28 → 0.6.29

package/dist/components/layout/Columns.js

@@ -225,10 +225,13 @@ export const ColumnsConfig = {
         // Self-contained CSS grid — does NOT depend on the consumer's Tailwind
         // generating utility classes. Single column on mobile (stacked); switches to
         // the multi-column template at >=768px via the scoped media query below.
+        // NOTE: grid-template-columns must NOT be set inline — an inline style would
+        // outrank the @media rule below (inline beats stylesheet, media queries
+        // included), pinning the layout to one column. Both the mobile base and the
+        // responsive override live in the scoped <style> so the media query can win.
         const colsTemplate = resolveColumnsTemplate(safeCount, distribution);
         const gridStyles = {
             display: 'grid',
-            gridTemplateColumns: '1fr',
             gap,
             ...dimensionsResult.baseStyles,
             '--cols-template': colsTemplate
@@ -260,6 +263,7 @@ export const ColumnsConfig = {
                         }),
                         /*#__PURE__*/ _jsx("style", {
                             children: `
+            .${contentClass} { grid-template-columns: 1fr; }
             @media (min-width: 768px) {
               .${contentClass} {
                 grid-template-columns: var(--cols-template);

package/dist/components/layout/Columns.server.js

@@ -106,10 +106,13 @@ export const ColumnsConfig = {
         // generating utility classes. Single column on mobile (stacked); switches to
         // the multi-column template at >=768px via the scoped media query below.
         // grid-template-columns is dynamic, so drive it from a CSS var.
+        // NOTE: grid-template-columns must NOT be set inline — an inline style would
+        // outrank the @media rule below (inline beats stylesheet, media queries
+        // included), pinning the layout to one column. Both the mobile base and the
+        // responsive override live in the scoped <style> so the media query can win.
         const colsTemplate = resolveColumnsTemplate(safeCount, distribution);
         const gridStyles = {
             display: 'grid',
-            gridTemplateColumns: '1fr',
             gap,
             ...dimensionsResult.baseStyles,
             '--cols-template': colsTemplate
@@ -141,6 +144,7 @@ export const ColumnsConfig = {
                         }),
                         /*#__PURE__*/ _jsx("style", {
                             children: `
+            .${contentClass} { grid-template-columns: 1fr; }
             @media (min-width: 768px) {
               .${contentClass} {
                 grid-template-columns: var(--cols-template);

package/dist/components/layout/Grid.js

@@ -183,9 +183,12 @@ export const GridConfig = {
         // generating utility classes. Single column on mobile (children stacked);
         // switches to the multi-column track at >=768px via the scoped media query.
         // grid-template-columns is dynamic, so drive the column count from a CSS var.
+        // NOTE: grid-template-columns must NOT be set inline — an inline style would
+        // outrank the @media rule below (inline beats stylesheet, media queries
+        // included), pinning the layout to one column. Both the mobile base and the
+        // responsive override live in the scoped <style> so the media query can win.
         const gridStyles = {
             display: 'grid',
-            gridTemplateColumns: '1fr',
             gap,
             ...dimensionsResult.baseStyles,
             '--grid-cols': numColumns
@@ -208,6 +211,7 @@ export const GridConfig = {
                         }),
                         /*#__PURE__*/ _jsx("style", {
                             children: `
+            .${contentClass} { grid-template-columns: 1fr; }
             @media (min-width: 768px) {
               .${contentClass} {
                 grid-template-columns: repeat(var(--grid-cols), 1fr);

package/dist/components/layout/Grid.server.js

@@ -92,9 +92,12 @@ export const GridConfig = {
         // generating utility classes. Single column on mobile (children stacked);
         // switches to the multi-column track at >=768px via the scoped media query.
         // grid-template-columns is dynamic, so drive the column count from a CSS var.
+        // NOTE: grid-template-columns must NOT be set inline — an inline style would
+        // outrank the @media rule below (inline beats stylesheet, media queries
+        // included), pinning the layout to one column. Both the mobile base and the
+        // responsive override live in the scoped <style> so the media query can win.
         const gridStyles = {
             display: 'grid',
-            gridTemplateColumns: '1fr',
             gap,
             ...dimensionsResult.baseStyles,
             '--grid-cols': numColumns
@@ -119,6 +122,7 @@ export const GridConfig = {
                         }),
                         /*#__PURE__*/ _jsx("style", {
                             children: `
+            .${contentClass} { grid-template-columns: 1fr; }
             @media (min-width: 768px) {
               .${contentClass} {
                 grid-template-columns: repeat(var(--grid-cols), 1fr);

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "0.6.28";
+export declare const VERSION = "0.6.29";

package/dist/version.js

@@ -1,2 +1,2 @@
 // Auto-generated by scripts/generate-version.js - do not edit manually
-export const VERSION = '0.6.28';
+export const VERSION = '0.6.29';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@delmaredigital/payload-puck",
-  "version": "0.6.28",
+  "version": "0.6.29",
   "description": "Puck visual page builder plugin for Payload CMS",
   "type": "module",
   "license": "MIT",