add description to package

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

@@ -40,14 +40,15 @@
 
 .umb-packages {
     margin: 0 -10px;
+    display: flex;
+    flex-wrap: wrap;
 }
 
 // Cards
 .umb-package {
-    float: left;
     padding: 10px;
     box-sizing: border-box;
-    width: 20%;
+    width: 25%;
 }
 
 .umb-package-link {
@@ -129,6 +130,13 @@
     margin-right: auto;
 }
 
+.umb-package-description {
+    font-size: 11px;
+    color: @grayMed;
+    word-wrap: break-word;
+    line-height: 1.1rem;
+}
+
 // Numbers
 .umb-package-numbers {
     display: flex;

src/Umbraco.Web.UI.Client/src/views/packagesNew/views/repo.html

@@ -32,6 +32,7 @@
 
                     <div class="umb-package-info">
                         <div class="umb-package-name">{{ package.name }}</div>
+                        <div class="umb-package-description">{{ package.description | limitTo: 40 }}<span ng-if="package.description > (package.description | limitTo: 40)">...</span></div>
 
                         <div class="umb-package-numbers">
                             <small class="umb-package-downloads">
@@ -61,9 +62,8 @@
                     </div>
 
                     <div class="umb-package-info">
-                        <h4 class="umb-package-name">
-                            {{ package.name }}
-                        </h4>
+                        <div class="umb-package-name">{{ package.name }}</div>
+                        <div class="umb-package-description">{{ package.description | limitTo: 40 }}<span ng-if="package.description > (package.description | limitTo: 40)">...</span></div>
 
                         <div class="umb-package-numbers">
                             <small class="umb-package-downloads">