Merge pull request #2374 from tf/constrainted-px

tf · web-flow · commit 2c71290da8a2 · 2026-03-18T14:47:22.000+01:00
Fix section max width in Safari
diff --git a/entry_types/scrolled/package/src/frontend/layouts/Center.module.css b/entry_types/scrolled/package/src/frontend/layouts/Center.module.css
@@ -20,7 +20,7 @@
 
 .box {
   --content-max-width: min(var(--layout-inline-content-max-width),
-                           var(--constrained-content-max-width, 100%));
+                           var(--constrained-content-max-width, 9999px));
   margin-left: auto;
   margin-right: auto;
   max-width: var(--content-max-width);
@@ -32,7 +32,7 @@
 
 .box-lg {
   --content-max-width: min(var(--layout-inline-lg-content-max-width),
-                           var(--constrained-content-max-width, 100%));
+                           var(--constrained-content-max-width, 9999px));
 }
 
 .box-xl {
diff --git a/entry_types/scrolled/package/src/frontend/layouts/TwoColumn.module.css b/entry_types/scrolled/package/src/frontend/layouts/TwoColumn.module.css
@@ -26,12 +26,12 @@
 
 .inline {
   --content-max-width: min(var(--layout-inline-content-max-width),
-                           var(--constrained-content-max-width, 100%));
+                           var(--constrained-content-max-width, 9999px));
 }
 
 .inline.width-lg {
   --content-max-width: min(var(--layout-inline-lg-content-max-width),
-                           var(--constrained-content-max-width, 100%));
+                           var(--constrained-content-max-width, 9999px));
 }
 
 .inline.width-xl {
@@ -123,7 +123,7 @@
 
 .constrainContentWidth .side {
   position: relative;
-  --side-offset: calc((min(var(--layout-inline-content-max-width), var(--constrained-content-max-width, 100%)) -
+  --side-offset: calc((min(var(--layout-inline-content-max-width), var(--constrained-content-max-width, 9999px)) -
                        var(--content-max-width)) / 2);
   right: var(--side-offset);
 }

Original file line number	Diff line number	Diff line change
`@@ -26,12 +26,12 @@`
`26`	`26`
`27`	`27`	`.inline {`
`28`	`28`	`--content-max-width: min(var(--layout-inline-content-max-width),`
`29`		`- var(--constrained-content-max-width, 100%));`
	`29`	`+ var(--constrained-content-max-width, 9999px));`
`30`	`30`	`}`
`31`	`31`
`32`	`32`	`.inline.width-lg {`
`33`	`33`	`--content-max-width: min(var(--layout-inline-lg-content-max-width),`
`34`		`- var(--constrained-content-max-width, 100%));`
	`34`	`+ var(--constrained-content-max-width, 9999px));`
`35`	`35`	`}`
`36`	`36`
`37`	`37`	`.inline.width-xl {`
`@@ -123,7 +123,7 @@`
`123`	`123`
`124`	`124`	`.constrainContentWidth .side {`
`125`	`125`	`position: relative;`
`126`		`- --side-offset: calc((min(var(--layout-inline-content-max-width), var(--constrained-content-max-width, 100%)) -`
	`126`	`+ --side-offset: calc((min(var(--layout-inline-content-max-width), var(--constrained-content-max-width, 9999px)) -`
`127`	`127`	`var(--content-max-width)) / 2);`
`128`	`128`	`right: var(--side-offset);`
`129`	`129`	`}`