Merge pull request #1620 from bjarnef/dev-v7-U4-9186

U4-9186 - Fix positioning of file icon extension label

src/Umbraco.Web.UI.Client/src/less/hacks.less

@@ -20,12 +20,17 @@
 }
 
 .thumbnail {
-    border-radius: 0px;
-}
+    border-radius: 0;
+    min-width: 150px;
 
-.thumbnail img {
-	max-width: 100% !important;
-    width: 100%;
+    > a {
+        display: block;
+    }
+
+    img {
+	    max-width: 100% !important;
+        width: 100%;
+    }
 }
 
 #mapCanvas img {

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

@@ -518,6 +518,7 @@ ul.color-picker li a  {
 
     .gravity-container .viewport {
         max-width: 600px;
+        min-width: 250px;
     }
 
     .gravity-container .viewport:hover {
@@ -809,28 +810,38 @@ ul.color-picker li a  {
   padding-top: 27px;
 }
 
-.umb-fileupload .file-icon {
+.umb-fileupload .file-icon-wrap {
   text-align: center;
   display: block;
   position: relative;
   padding: 5px 0;
 
-  > .icon {
-    font-size: 70px;
-    line-height: 110%;
-    color: @gray-4;
-    text-align: center;
+  /* fit text within container */
+  & + span {
+      word-wrap: break-word;
   }
 
-  > span {
+  .file-icon {
+      position: relative;
+      display: inline-block;
+
+      > .icon {
+        font-size: 70px;
+        line-height: 110%;
+    color: @gray-4;
+        text-align: center;
+      }
+
+      > span {
     color: @white;
     background: @gray-4;
-    padding: 1px 3px;
-    font-size: 12px;
-    line-height: 130%;
-    position: absolute;
-    top: 45px;
-    left: 110px;
+        padding: 1px 3px;
+        font-size: 12px;
+        line-height: 130%;
+        position: absolute;
+        top: 40px;
+        left: 35px;
+      }
   }
 }
 

src/Umbraco.Web.UI.Client/src/views/propertyeditors/fileupload/fileupload.html

@@ -6,9 +6,11 @@
                 <a href="{{file.file}}" target="_blank" ng-switch on="file.isImage">
                     <img ng-src="{{file.thumbnail}}" ng-switch-when="true" alt="{{file.file}}" />
                     <img ng-src="{{file.file}}" ng-switch-when="false" ng-if="file.extension == 'svg'" alt="{{file.file}}" />
-                    <span class="file-icon" ng-if="!file.isImage && file.extension != 'svg'">
-                        <i class="icon icon-document"></i>
-                        <span>.{{file.extension}}</span>
+                    <span class="file-icon-wrap" ng-if="!file.isImage && file.extension != 'svg'">
+                        <span class="file-icon">
+                            <i class="icon icon-document"></i>
+                            <span>.{{file.extension}}</span>
+                        </span>
                     </span>
                     <span ng-switch-default>{{file.file}}</span>
                 </a>