From 99ffbed7a6ad0449a798da17dff0855c006144de Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Mon, 9 Aug 2021 10:53:22 +0200
Subject: [PATCH] wrap variant switcher in correct flex values

---
 .../editor/umb-variant-switcher.less           | 10 ++++++++++
 .../editor/umb-editor-content-header.html      | 18 +++++++++++-------
 2 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/components/editor/umb-variant-switcher.less b/src/Umbraco.Web.UI.Client/src/less/components/editor/umb-variant-switcher.less
index 4429990b4f..e56669bfc2 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/editor/umb-variant-switcher.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/editor/umb-variant-switcher.less
@@ -108,6 +108,16 @@ button.umb-variant-switcher__toggle {
     cursor: default;
 }
 
+.umb-variant-switcher__name-wrapper {
+    display: flex;
+    align-items: center;
+
+    .umb-variant-switcher__name-content {
+        display: flex;
+        flex-direction: column;
+    }
+}
+
 .umb-variant-switcher__item.--state-notCreated:not(.--active) {
     .umb-variant-switcher__name-wrapper::before {
         content: "+";
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-content-header.html b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-content-header.html
index af57e41b5a..ad4d48eccd 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-content-header.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-content-header.html
@@ -59,11 +59,13 @@
                                 <i class="icon {{entry.open ? 'icon-navigation-down' : 'icon-navigation-right'}}"></i>
                             </button>
                             <button type="button" class="umb-variant-switcher__name-wrapper umb-outline" ng-click="selectVariant($event, entry.variant)">
-                                <span class="umb-variant-switcher__name" ng-bind="entry.variant.displayName"></span>
-                                <span class="umb-variant-switcher__state">
-                                    <umb-variant-state variant="entry.variant"></umb-variant-state>
-                                    <span ng-if="entry.variant.language.isMandatory"> - <localize key="general_mandatory"></localize></span>
-                                    <span ng-if="entry.variant.language.isDefault"> - <localize key="general_default"></localize></span>
+                                <span class="umb-variant-switcher__name-content">
+                                    <span class="umb-variant-switcher__name" ng-bind="entry.variant.displayName"></span>
+                                    <span class="umb-variant-switcher__state">
+                                        <umb-variant-state variant="entry.variant"></umb-variant-state>
+                                        <span ng-if="entry.variant.language.isMandatory"> - <localize key="general_mandatory"></localize></span>
+                                        <span ng-if="entry.variant.language.isDefault"> - <localize key="general_default"></localize></span>
+                                    </span>
                                 </span>
                             </button>
                             <div ng-if="splitViewOpen !== true && !entry.variant.active" class="umb-variant-switcher__split-view umb-outline" ng-click="openInSplitView($event, entry.variant)">Open in split view</div>
@@ -79,8 +81,10 @@
                                 ng-class="{'--current': subVariant === editor.content, '--active': subVariant.active && vm.dropdownOpen, '--error': subVariant.active !== true && subVariant.hasError, '--state-notCreated':subVariant.state==='NotCreated', '--state-draft':subVariant.state==='Draft'}"
                             >
                                 <button type="button" class="umb-variant-switcher__name-wrapper umb-outline" ng-click="selectVariant($event, subVariant)">
-                                    <span class="umb-variant-switcher__name" ng-bind="subVariant.segment"></span>
-                                    <umb-variant-state variant="subVariant" class="umb-variant-switcher__state"></umb-variant-state>
+                                    <span class="umb-variant-switcher__name-content">
+                                        <span class="umb-variant-switcher__name" ng-bind="subVariant.segment"></span>
+                                        <umb-variant-state variant="subVariant" class="umb-variant-switcher__state"></umb-variant-state>
+                                    </span>
                                 </button>
                                 <div ng-if="splitViewOpen !== true && !subVariant.active" class="umb-variant-switcher__split-view umb-outline" ng-click="openInSplitView($event, subVariant)">Open in split view</div>
                             </umb-dropdown-item>