From 3a0dd2399a97341af7c75c2cfa1f31358f0a8df1 Mon Sep 17 00:00:00 2001
From: Kenn Jacobsen <post@kennjacobsen.dk>
Date: Tue, 19 Mar 2019 14:24:32 +0100
Subject: [PATCH] V8: Make "Open in split view" look better in narrow viewports
 (#4619)

* Make "Open in split view" look better in narrow viewports
* Add white background to inactive split view button
* Better support for long culture names
---
 .../src/less/components/editor.less                | 14 ++++++++++----
 .../editor/umb-editor-content-header.html          |  2 +-
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/components/editor.less b/src/Umbraco.Web.UI.Client/src/less/components/editor.less
index 0770a895c0a1..28d56058d2e7 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/editor.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/editor.less
@@ -195,6 +195,7 @@ a.umb-variant-switcher__toggle {
     justify-content: space-between;
 	align-items: center;
 	border-bottom: 1px solid @gray-9;
+    position: relative;
     &:hover .umb-variant-switcher__name-wrapper {
         
     }
@@ -246,10 +247,15 @@ a.umb-variant-switcher__toggle {
 }
 
 .umb-variant-switcher__split-view {
-	font-size: 13px;
-	display: none;
-	padding: 16px 20px;
-    
+    font-size: 13px;
+    display: none;
+    padding: 16px 20px;
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    background-color: @white;
+
     &:hover {
         background-color: @ui-option-hover;
         color: @ui-option-type-hover;
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 227a08c54f65..d3bf14b58c42 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
@@ -38,7 +38,7 @@
                         <span>{{vm.currentVariant.language.name}}</span>
                     </span>
 
-                    <umb-dropdown ng-if="vm.dropdownOpen" style="width: 100%; max-height: 250px; overflow-y: scroll; margin-top: 5px;" on-close="vm.dropdownOpen = false" umb-keyboard-list>
+                    <umb-dropdown ng-if="vm.dropdownOpen" style="min-width: 100%; max-height: 250px; overflow-y: auto; margin-top: 5px;" on-close="vm.dropdownOpen = false" umb-keyboard-list>
                         <umb-dropdown-item class="umb-variant-switcher__item" ng-class="{'umb-variant-switcher_item--current': variant.active, 'umb-variant-switcher_item--not-allowed': variantIsOpen(variant.language.culture)}" ng-repeat="variant in content.variants">
                             <a href="" class="umb-variant-switcher__name-wrapper" ng-click="selectVariant($event, variant)" prevent-default>
                                 <span class="umb-variant-switcher__name" ng-class="{'bold': variant.language.isDefault}">{{variant.language.name}}</span>