From cbcef8ba6cd26693f756576928fdb8549ab15de7 Mon Sep 17 00:00:00 2001
From: Nathan Woulfe <nathan@nathanw.com.au>
Date: Wed, 2 Oct 2019 20:01:02 +1000
Subject: [PATCH] allow node preview content to wrap

---
 .../src/less/components/umb-node-preview.less |  2 ++
 .../views/components/umb-node-preview.html    | 20 ++++++++++---------
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-node-preview.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-node-preview.less
index cdd9dfa958..f754a09368 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-node-preview.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-node-preview.less
@@ -3,6 +3,7 @@
     display: flex;
     box-sizing: border-box;
     border-bottom: 1px solid @gray-9;
+    flex-wrap: wrap;
 }
 
 .umb-editor-wrapper .umb-node-preview {
@@ -64,6 +65,7 @@
     flex: 0 0 auto;
     display: flex;
     align-items: center;
+    margin-left: auto;
 }
 
 .umb-node-preview__action {
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-node-preview.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-node-preview.html
index f2c86c46ab..dca3849491 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-node-preview.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-node-preview.html
@@ -1,15 +1,17 @@
 <div class="umb-node-preview" ng-class="{'umb-node-preview--sortable': sortable, 'umb-node-preview--unpublished': published === false }">
-    <i ng-if="icon" class="umb-node-preview__icon {{ icon }}" aria-hidden="true"></i>
-    <div class="umb-node-preview__content">
+    <div class="flex"> <!-- div keeps icon and nodename from wrapping -->
+        <i ng-if="icon" class="umb-node-preview__icon {{ icon }}" aria-hidden="true"></i>
+        <div class="umb-node-preview__content">
 
-        <div class="umb-node-preview__name" ng-attr-title="{{alias}}">{{ name }}</div>
-        <div class="umb-node-preview__description" ng-if="description">{{ description }}</div>
+            <div class="umb-node-preview__name" ng-attr-title="{{alias}}">{{ name }}</div>
+            <div class="umb-node-preview__description" ng-if="description">{{ description }}</div>
 
-        <div class="umb-user-group-preview__permissions" ng-if="permissions">
-            <span>
-                <span class="bold"><localize key="general_rights">Permissions</localize>:</span>
-                <span ng-repeat="permission in permissions" class="umb-user-group-preview__permission">{{ permission.name }}</span>
-            </span>
+            <div class="umb-user-group-preview__permissions" ng-if="permissions">
+                <span>
+                    <span class="bold"><localize key="general_rights">Permissions</localize>:</span>
+                    <span ng-repeat="permission in permissions" class="umb-user-group-preview__permission">{{ permission.name }}</span>
+                </span>
+            </div>
         </div>
     </div>
     <div class="umb-node-preview__actions">