Fix visual alignment of not-created Culture-variants in variant selector

[Copilot]

Prerequisites

• I have added steps to test this contribution in the description below

Description

Not-created Culture-variants in the variant selector visually aligned with Segments due to identical left padding, causing confusion about the hierarchy. Culture-variants should appear at a higher level than Segments.

Change:

• Added CSS rule for .culture-variant > .switch-button.add-mode with padding-left: var(--uui-size-space-3) to match the reduced padding used when an expand-area is present

.culture-variant > .switch-button.add-mode {
    padding-left: var(--uui-size-space-3);
}

This ensures not-created Culture-variants have less indentation than Segment variants (--uui-size-space-6), maintaining proper visual hierarchy.

To test:

1. Create a Document Type with culture variation and segment variation enabled
2. Create content with this Document Type
3. Open the variant selector dropdown
4. Observe that not-created Culture-variants now appear visually above (less indented than) Segment variants

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• iojs.org
  • Triggering command: /usr/bin/curl curl -q --fail --compressed -L -s REDACTED -o - (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

In the current variant selector component of Umbraco CMS (version 17.0), not-created Culture-variants visually align with Segments, causing confusion. To improve clarity, the Culture-variants should be adjusted to visually appear at a level above Segments. This requires very minimal code change and must maintain backward compatibility. The solution should focus on CSS or layout modifications without affecting functionality while ensuring no breaking changes to other parts of the application.

This pull request was created as a result of the following prompt from Copilot chat.

In the current variant selector component of Umbraco CMS (version 17.0), not-created Culture-variants visually align with Segments, causing confusion. To improve clarity, the Culture-variants should be adjusted to visually appear at a level above Segments. This requires very minimal code change and must maintain backward compatibility. The solution should focus on CSS or layout modifications without affecting functionality while ensuring no breaking changes to other parts of the application.

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.