From 339ae32c3df8f8a18adae4bac5fdb0a2e49b23eb Mon Sep 17 00:00:00 2001
From: Kenn Jacobsen <kja@vertica.dk>
Date: Wed, 12 Jun 2019 09:09:17 +0200
Subject: [PATCH] Fix the overflow wrapping for repeatable textstrings

---
 .../less/components/umb-multiple-textbox.less |  7 ++++-
 .../multipletextbox/multipletextbox.html      | 31 ++++++++++---------
 2 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-multiple-textbox.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-multiple-textbox.less
index 6af0641d8c..30a32b8123 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-multiple-textbox.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-multiple-textbox.less
@@ -1,9 +1,10 @@
 .umb-multiple-textbox{
     &__confirm{
         position: relative;
+        display: inline-block;
 
         &-action{
-            margin: 0;
+            margin: -2px 0 0 0;
             padding: 2px;
             background: transparent;
             border: 0 none;
@@ -11,6 +12,10 @@
     }
 }
 
+.umb-multiple-textbox .icon-wrapper {
+    width: 50px;
+}
+
 .umb-multiple-textbox .textbox-wrapper {
     align-items: center;
     margin-bottom: 15px;
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/multipletextbox/multipletextbox.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/multipletextbox/multipletextbox.html
index e3abe970a2..64330926a4 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/multipletextbox/multipletextbox.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/multipletextbox/multipletextbox.html
@@ -2,23 +2,24 @@
 
   <div ui-sortable="sortableOptions" ng-model="model.value">
     <div class="flex flex-wrap textbox-wrapper" ng-repeat="item in model.value track by $index">
-      <input type="text" name="item_{{$index}}" ng-model="item.value" class="umb-property-editor umb-textstring textstring"
-             ng-keyup="addRemoveOnKeyDown($event, $index)" focus-when="{{item.hasFocus}}"/>
-      <i class="icon icon-navigation handle" localize="title" title="@general_move"></i>
+        <input type="text" name="item_{{$index}}" ng-model="item.value" class="umb-property-editor umb-textstring textstring flx-i"
+               ng-keyup="addRemoveOnKeyDown($event, $index)" focus-when="{{item.hasFocus}}"/>
+        <div class="icon-wrapper">
+            <i class="icon icon-navigation handle" localize="title" title="@general_move"></i>
 
-    <div class="umb-multiple-textbox__confirm" ng-show="model.value.length > model.config.min">
-        <button class="umb-multiple-textbox__confirm-action" type="button" prevet-default ng-click="showPrompt($index, item)" localize="title" title="@content_removeTextBox">
-            <i class="icon-trash"></i>
-        </button>
-
-        <umb-confirm-action
-            ng-if="promptIsVisible === $index"
-            direction="left"
-            on-confirm="remove($index)"
-            on-cancel="hidePrompt()">
-        </umb-confirm-action>
-    </div>
+            <div class="umb-multiple-textbox__confirm" ng-show="model.value.length > model.config.min">
+                <button class="umb-multiple-textbox__confirm-action" type="button" prevet-default ng-click="showPrompt($index, item)" localize="title" title="@content_removeTextBox">
+                    <i class="icon-trash"></i>
+                </button>
 
+                <umb-confirm-action
+                    ng-if="promptIsVisible === $index"
+                    direction="left"
+                    on-confirm="remove($index)"
+                    on-cancel="hidePrompt()">
+                </umb-confirm-action>
+            </div>
+        </div>
     </div>
   </div>
   <a prevent-default href="" class="add-link" localize="title" title="@content_addTextBox"