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 947f26a67a..efbce1d52c 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
@@ -290,9 +290,10 @@ export class UmbWorkspaceSplitViewVariantSelectorElement<
: ''} ${this.#isReadOnly(variantOption.culture) ? 'readonly-mode' : ''}"
@click=${() => this.#switchVariant(variantOption)}>
${this.#isCreateMode(variantOption) ? html`` : nothing}
-
+
- ${variantOption.language.name} ${this.#renderReadOnlyTag(variantOption.culture)}
+ ${variantOption.variant?.name ?? variantOption.language.name}
+ ${this.#renderReadOnlyTag(variantOption.culture)}
${this._renderVariantDetails(variantOption)}
@@ -303,6 +304,7 @@ export class UmbWorkspaceSplitViewVariantSelectorElement<
>
+
${variantOption.language.name}
${this.#renderSplitViewButton(variantOption)}
@@ -332,10 +334,11 @@ export class UmbWorkspaceSplitViewVariantSelectorElement<
? nothing
: html`
this.#openSplitView(variant)}>
- Split view
+ Open in Split view
`}
`;
@@ -423,6 +426,32 @@ export class UmbWorkspaceSplitViewVariantSelectorElement<
background: var(--uui-palette-sand);
color: var(--uui-palette-space-cadet-light);
}
+ .variant-selector-switch-button .variant-info {
+ flex-grow: 1;
+ }
+
+ .variant-selector-switch-button .variant-details {
+ color: var(--uui-color-text-alt);
+ font-size: 12px;
+ font-weight: normal;
+ }
+ .variant-selector-switch-button .variant-details {
+ color: var(--uui-color-text-alt);
+ font-size: 12px;
+ font-weight: normal;
+ }
+ .variant-selector-switch-button.add-mode .variant-details {
+ color: var(--uui-palette-dusty-grey-dark);
+ }
+
+ .variant-selector-switch-button .specs-info {
+ color: var(--uui-color-text-alt);
+ font-size: 12px;
+ font-weight: normal;
+ }
+ .variant-selector-switch-button.add-mode .specs-info {
+ color: var(--uui-palette-dusty-grey-dark);
+ }
.variant-selector-switch-button i {
font-weight: normal;
@@ -466,12 +495,6 @@ export class UmbWorkspaceSplitViewVariantSelectorElement<
bottom: 1px;
display: none;
}
-
- .variant-details {
- color: var(--uui-palette-malibu-dimmed);
- font-size: 12px;
- font-weight: normal;
- }
`,
];
}