From 6daa244531662467b4e38fac84fef10836711913 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Tue, 21 Feb 2023 20:58:01 +0100
Subject: [PATCH] responsive property behavior

---
 .../workspace-property-layout.element.ts      | 33 ++++++++++++++++---
 1 file changed, 28 insertions(+), 5 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-property-layout/workspace-property-layout.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-property-layout/workspace-property-layout.element.ts
index 82c6706f0d..ec48f89302 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-property-layout/workspace-property-layout.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-property-layout/workspace-property-layout.element.ts
@@ -15,18 +15,25 @@ export class UmbWorkspacePropertyLayoutElement extends LitElement {
 		css`
 			:host {
 				display: grid;
-				grid-template-columns: 200px 600px;
-				gap: var(--uui-size-layout-2);
+				grid-template-columns: 200px auto;
+				column-gap: var(--uui-size-layout-2);
 				border-bottom: 1px solid var(--uui-color-divider);
 				padding: var(--uui-size-space-6) 0;
+				container-type: inline-size;
 			}
 
-			:host([orientation="vertical"]) {
-				display:block;
+			:host > div {
+				grid-column: span 2;
+			}
+
+			@container (width > 600px) {
+				:host(:not([orientation='vertical'])) > div {
+					grid-column: span 1;
+				}
 			}
 
 			:host(:last-of-type) {
-				border-bottom:none;
+				border-bottom: none;
 			}
 
 			p {
@@ -40,6 +47,15 @@ export class UmbWorkspacePropertyLayoutElement extends LitElement {
 		`,
 	];
 
+	/**
+	 * Alias. The technical name of the property.
+	 * @type {string}
+	 * @attr
+	 * @default ''
+	 */
+	@property({ type: String })
+	public alias = '';
+
 	/**
 	 * Label. Name of the property.
 	 * @type {string}
@@ -49,6 +65,13 @@ export class UmbWorkspacePropertyLayoutElement extends LitElement {
 	@property({ type: String })
 	public label = '';
 
+	/**
+	 * Orientation: Horizontal is the default where label goes left and editor right.
+	 * Vertical is where label goes above the editor.
+	 * @type {string}
+	 * @attr
+	 * @default ''
+	 */
 	@property({ type: String })
 	public orientation: 'horizontal' | 'vertical' = 'horizontal';