Fixes text not overlayed on top of icon for folders in folder browser

src/Umbraco.Web.UI.Client/src/less/property-editors.less

@@ -308,10 +308,6 @@ ul.color-picker li a  {
   line-height: 120px
 }
 
-.umb-folderbrowser .selector-overlay{
-  display: none;
-}
-
 .umb-upload-drop-zone{
     margin-bottom:5px;
 }
@@ -369,7 +365,7 @@ ul.color-picker li a  {
 
 
 .umb-photo-folder .picrow div a:first-child {
-    width:100%;
+     width:100%;
     height:100%;
 }
 
@@ -389,6 +385,10 @@ ul.color-picker li a  {
   text-decoration: none;
 }
 
+.umb-photo-folder .selector-overlay{
+  display: none;
+}
+
 //this is a temp hack, to provide selectors in the dialog:
 .umb-photo-folder .pic:hover .selector-overlay {
   position: absolute;
@@ -421,6 +421,15 @@ ul.color-picker li a  {
   transform: translateY(-50%);
 }
 
+.umb-photo-folder .umb-non-thumbnail span{
+  display: block;
+  margin: auto;
+  /*vertically aligns */
+  position: static;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
 .umb-photo-folder .selected{
   position: relative;
 }

src/Umbraco.Web.UI.Client/src/views/directives/html/umb-photo-folder.html

@@ -11,8 +11,7 @@
 
                 <div ng-style="img.style" class="umb-non-thumbnail" ng-if="!img.thumbnail">
                     <i class="icon large {{img.icon}}"></i>
-                    {{img.name}}
-                    
+                    <span>{{img.name}}</span>
                 </div>
 
                 <div ng-if="img.thumbnail" class="umb-photo" ng-style="img.thumbStyle" alt="{{img.name}}">