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..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 @@ -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; + } } - /*}*/ `, ]; }