From dd5630d2716ea98dc0adc55d2a7a1daecce0d2d1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Fri, 14 Nov 2025 10:07:08 +0100 Subject: [PATCH 1/2] implement container queries for properties --- ...ent-type-design-editor-property.element.ts | 2 +- .../property-layout.element.ts | 27 ++++++++++--------- 2 files changed, 15 insertions(+), 14 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/content/content-type/workspace/views/design/content-type-design-editor-property.element.ts b/src/Umbraco.Web.UI.Client/src/packages/content/content-type/workspace/views/design/content-type-design-editor-property.element.ts index 0e322bd40339..7cd1e0d07342 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/content/content-type/workspace/views/design/content-type-design-editor-property.element.ts +++ b/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; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property/components/property-layout/property-layout.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property/components/property-layout/property-layout.element.ts index 9d7828b01826..ff18211efdab 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property/components/property-layout/property-layout.element.ts +++ b/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 > var(--uui-size-72)00px) { + :host(:not([orientation='vertical'])) #editorColumn { + margin-top: 0; + } } - /*}*/ `, ]; } From f3710a35e82b8aeda96cc08e0ba68cce109cacc3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Fri, 14 Nov 2025 11:55:58 +0100 Subject: [PATCH 2/2] Update src/Umbraco.Web.UI.Client/src/packages/core/property/components/property-layout/property-layout.element.ts Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- .../components/property-layout/property-layout.element.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property/components/property-layout/property-layout.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property/components/property-layout/property-layout.element.ts index ff18211efdab..c1118e2e418d 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property/components/property-layout/property-layout.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property/components/property-layout/property-layout.element.ts @@ -161,7 +161,7 @@ export class UmbPropertyLayoutElement extends UmbLitElement { #editorColumn { margin-top: var(--uui-size-space-3); } - @container (width > var(--uui-size-72)00px) { + @container (width > 700px) { :host(:not([orientation='vertical'])) #editorColumn { margin-top: 0; }