Properties: Implement container queries (#20832)

implement container queries for properties

Author: nielslyngsoe

src/Umbraco.Web.UI.Client/src/packages/content/content-type/workspace/views/design/content-type-design-editor-property.element.ts

@@ -351,7 +351,7 @@ export class UmbContentTypeDesignEditorPropertyElement extends UmbLitElement {
 				grid-column: span 2;
 			}
 
-			@container (width > 600px) {
+			@container (width > 700px) {
 				:host(:not([orientation='vertical'])) > div {
 					grid-column: span 1;
 				}

src/Umbraco.Web.UI.Client/src/packages/core/property/components/property-layout/property-layout.element.ts

@@ -105,29 +105,30 @@ export class UmbPropertyLayoutElement extends UmbLitElement {
 				grid-template-columns: 200px minmax(0, 1fr);
 				column-gap: var(--uui-size-layout-2);
 				padding: var(--uui-size-layout-1) 0;
+				container-type: inline-size;
 			}
 
 			:host > div {
 				grid-column: span 2;
 			}
 
-			/*@container (width > 600px) {*/
-			:host(:not([orientation='vertical'])) > div {
-				grid-column: span 1;
+			@container (width > 700px) {
+				:host(:not([orientation='vertical'])) > div {
+					grid-column: span 1;
+				}
 			}
-			/*}*/
 
 			#headerColumn {
 				position: relative;
 				height: min-content;
 				top: var(--umb-property-layout-header-top);
 			}
-			/*@container (width > 600px) {*/
-			:host(:not([orientation='vertical'])) #headerColumn {
-				position: sticky;
-				top: var(--umb-property-layout-header-top, calc(var(--uui-size-space-2) * -1));
+			@container (width > 700px) {
+				:host(:not([orientation='vertical'])) #headerColumn {
+					position: sticky;
+					top: var(--umb-property-layout-header-top, calc(var(--uui-size-space-2) * -1));
+				}
 			}
-			/*}*/
 
 			:host {
 				/* TODO: Temp solution to not get a yellow asterisk when invalid. */
@@ -160,11 +161,11 @@ export class UmbPropertyLayoutElement extends UmbLitElement {
 			#editorColumn {
 				margin-top: var(--uui-size-space-3);
 			}
-			/*@container (width > 600px) {*/
-			:host(:not([orientation='vertical'])) #editorColumn {
-				margin-top: 0;
+			@container (width > 700px) {
+				:host(:not([orientation='vertical'])) #editorColumn {
+					margin-top: 0;
+				}
 			}
-			/*}*/
 		`,
 	];
 }