From 126c8a56d5556f6e6dfe9057487022608bca95f0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Wed, 15 Oct 2025 11:29:49 +0200
Subject: [PATCH] variant selector: hint badge should render in append slotfor
 the variant selector (#20504)

ensure variant-selector badge gets rendered at the right spot
---
 ...workspace-split-view-variant-selector.element.ts | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-split-view/workspace-split-view-variant-selector.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-split-view/workspace-split-view-variant-selector.element.ts
index e273a92aa6..3b684d937e 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-split-view/workspace-split-view-variant-selector.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-split-view/workspace-split-view-variant-selector.element.ts
@@ -389,7 +389,7 @@ export class UmbWorkspaceSplitViewVariantSelectorElement<
 								${this.#renderReadOnlyTag(this._activeVariant?.culture)}
 								<uui-symbol-expand .open=${this._variantSelectorOpen}></uui-symbol-expand>
 							</uui-button>
-							${!this._variantSelectorOpen ? this.#renderHintBadge(firstHintOnInactiveVariant) : nothing}
+							${!this._variantSelectorOpen ? this.#renderVariantSelectorHintBadge(firstHintOnInactiveVariant) : nothing}
 							${this._activeVariants.length > 1
 								? html`
 										<uui-button slot="append" compact id="variant-close" @click=${this.#closeSplitView}>
@@ -466,6 +466,13 @@ export class UmbWorkspaceSplitViewVariantSelectorElement<
 		`;
 	}
 
+	#renderVariantSelectorHintBadge(hint?: UmbVariantHint) {
+		if (!hint) return nothing;
+		return html` <umb-badge slot="append" .color=${hint.color ?? 'default'} ?attention=${hint.color === 'invalid'}
+			>${hint.text}</umb-badge
+		>`;
+	}
+
 	#renderSubHintBadge(hint?: UmbVariantHint) {
 		if (!hint) return nothing;
 		return html` <umb-badge .color=${hint.color ?? 'default'} ?attention=${hint.color === 'invalid'}
@@ -782,6 +789,10 @@ export class UmbWorkspaceSplitViewVariantSelectorElement<
 				font-size: var(--uui-type-small-size);
 				font-weight: 700;
 			}
+
+			umb-badge {
+				z-index: 2;
+			}
 		`,
 	];
 }