fix(ui5-dynamic-page): change the container-type (#11325)

NakataCode · web-flow · commit 8402ec8cd47c · 2025-04-25T15:25:24.000+03:00
Problem: The current implementation uses 'container-type: size' which applies containment to both width and height dimensions. This creates a problem when combined with 'height: inherit' as it disrupts the height inheritance chain, causing inner components to collapse to zero height while width continues to work correctly. Solution: By changing to 'container-type: inline-size', we maintain containment only for the inline (width) dimension while allowing height to behave normally. This preserves all width-based container queries used for responsive design while fixing the height inheritance issue. Related to: #11309
diff --git a/packages/fiori/src/themes/DynamicPage.css b/packages/fiori/src/themes/DynamicPage.css
@@ -12,7 +12,7 @@
 }
 
 .ui5-dynamic-page-root {
-    container-type: size;
+    container-type: inline-size;
     height: inherit;
     overflow-y: hidden;
 }

Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,7 @@`
`12`	`12`	`}`
`13`	`13`
`14`	`14`	`.ui5-dynamic-page-root {`
`15`		`- container-type: size;`
	`15`	`+ container-type: inline-size;`
`16`	`16`	`height: inherit;`
`17`	`17`	`overflow-y: hidden;`
`18`	`18`	`}`