Allow tree item label to shrink

src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree-item.less

@@ -57,19 +57,20 @@
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
-        flex: 1 0 auto;
+        flex: 1 1 auto;
     }
 }
 
 // active is equivilant to selected, its the item that is begin affected by the actions performed in the right-click-dialog.
 .umb-tree-item.active > .umb-tree-item__inner {
+    border-color: @ui-selected-border;
+    box-shadow: 0 0 2px 0 fade(@ui-selected-border, 80%);
     color: @ui-selected-type;
+
     a {
         color: @ui-selected-type;
     }
-    
-    border-color: @ui-selected-border;
-    box-shadow: 0 0 2px 0 fade(@ui-selected-border, 80%);
+
     &::before {
         content: "";
         position: absolute;
@@ -79,8 +80,10 @@
         bottom: 0;
         border: 2px solid fade(white, 80%);
     }
+
     &:hover {
         color: @ui-selected-type-hover;
+
         a {
             color: @ui-selected-type-hover;
         }
@@ -88,7 +91,6 @@
 }
 
 .umb-tree-item.current > .umb-tree-item__inner {
-
     background: @ui-active;
     color:@ui-active-type;
     

src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree.less

@@ -72,8 +72,7 @@ body.touch .umb-tree {
     overflow: hidden;
     display: flex;
     flex-wrap: nowrap;
-    align-items: center;
-    
+    align-items: center;  
     border:2px solid transparent;
     
     color: @ui-option-type;
@@ -183,7 +182,6 @@ body.touch .umb-tree {
     &:hover {
         background: @btnBackgroundHighlight;
     }
-
     // NOTE - We're having to repeat ourselves here due to an .sr-only class appearing in umbraco/lib/font-awesome/css/font-awesome.min.css
     &.sr-only--hoverable:hover,
     &.sr-only--focusable:focus {