From 4c0de67298cf470a9de0a20e016fd60f9682b8f1 Mon Sep 17 00:00:00 2001
From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>
Date: Thu, 23 May 2024 13:39:42 +0200
Subject: [PATCH 1/2] fix: use the `uui-scroll-container` instead of
 `overflow-x` to preserve styling

---
 .../core/property/property-layout/property-layout.element.ts     | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property/property-layout/property-layout.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property/property-layout/property-layout.element.ts
index 53a868f93f..c8730c0963 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/property/property-layout/property-layout.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/property/property-layout/property-layout.element.ts
@@ -126,7 +126,6 @@ export class UmbPropertyLayoutElement extends UmbLitElement {
 
 			#description {
 				color: var(--uui-color-text-alt);
-				overflow-x: auto;
 			}
 
 			#editorColumn {

From b58f44ff7fbcc1ab5f46757e3edaf00e08b205f8 Mon Sep 17 00:00:00 2001
From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>
Date: Thu, 23 May 2024 13:40:21 +0200
Subject: [PATCH 2/2] fix: use `word-break: break-word` instead of `overflow-x`
 which had no effect on the title anyway

---
 .../property-layout/property-layout.element.ts       | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property/property-layout/property-layout.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property/property-layout/property-layout.element.ts
index c8730c0963..96fcd65d73 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/property/property-layout/property-layout.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/property/property-layout/property-layout.element.ts
@@ -62,12 +62,14 @@ export class UmbPropertyLayoutElement extends UmbLitElement {
 		// TODO: Only show alias on label if user has access to DocumentType within settings:
 		return html`
 			<div id="headerColumn">
-				<uui-label title=${this.alias}>
+				<uui-label id="label" title=${this.alias}>
 					${this.localize.string(this.label)}
 					${when(this.invalid, () => html`<uui-badge color="danger" attention>!</uui-badge>`)}
 				</uui-label>
 				<slot name="action-menu"></slot>
-				<div id="description">${unsafeHTML(localizeAndTransform(this, this.description))}</div>
+				<uui-scroll-container id="description">
+					${unsafeHTML(localizeAndTransform(this, this.description))}
+				</uui-scroll-container>
 				<slot name="description"></slot>
 			</div>
 			<div id="editorColumn">
@@ -113,11 +115,11 @@ export class UmbPropertyLayoutElement extends UmbLitElement {
 			}
 			/*}*/
 
-			uui-label {
+			#label {
 				position: relative;
-				overflow-x: auto;
+				word-break: break-word;
 			}
-			:host([invalid]) uui-label {
+			:host([invalid]) #label {
 				color: var(--uui-color-danger);
 			}
 			uui-badge {