variant selector: hint badge should render in append slotfor the variant selector (#20504)

ensure variant-selector badge gets rendered at the right spot

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;
+			}
 		`,
 	];
 }