Enabling word wrapping for tags in all layouts (#8274)

* Removed dividers between items in ul for package details in search results.
Word wrap for details in search results.

* Word wrap for tags everywhere.

* Blue "more tags" link.

* "More tags" instead of chevron.

Author: agr

src/Bootstrap/dist/css/bootstrap-theme.css

@@ -1,6 +1,7 @@
 //== Theme Variables
 @panel-footer-color:  @navbar-inverse-color;
 @default-margin-bottom: 24px;
+@package-list-line-height: 20px;
 
 //== Theme Definition
 html, body {
@@ -321,12 +322,11 @@ img.reserved-indicator-icon {
 .package-list {
   margin-top: 8px;
   margin-bottom: 8px;
-  margin-left: -5px;
   padding-left: 0;
-  line-height: 20px;
+  line-height: @package-list-line-height;
   color: @gray-light;
 
-  a {
+  a:not(.more-tags) {
     color: @gray-light;
   }
 
@@ -338,14 +338,10 @@ img.reserved-indicator-icon {
   @media (min-width: @screen-sm-min) {
     li {
       display: inline-block;
-    }
-
-    li + li {
-      margin-left: @padding-small-horizontal;
-      padding-left: @padding-small-horizontal;
-      border-left-style: solid;
-      border-width: 1px;
-      border-color: @gray-lighter;
+      line-height: @package-list-line-height;
+      max-height: (@package-list-line-height * 5 + 1px);
+      overflow-y: hidden;
+      padding-right: @padding-small-horizontal;
     }
   }
 }

src/Bootstrap/less/theme/base.less

@@ -51,19 +51,6 @@
       color: @text-color;
       line-height: 20px;
     }
-
-
-    .package-list {
-      @media (min-width: @screen-sm-min) {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-
-        li {
-          display: inline;
-        }
-      }
-    }
   }
 }
 

src/Bootstrap/less/theme/common-list-packages.less

@@ -96,10 +96,27 @@
                     <li class="package-tags">
                         <span class="icon-text">
                             <i class="ms-Icon ms-Icon--Tag" aria-hidden="true"></i>
-                            @foreach (var tag in Model.Tags)
+                            @{
+                                const int firstN = 10;
+                                var tags = Model.Tags.Take(firstN + 1).ToList();
+                                string lastTag = null;
+                                if (tags.Count > firstN)
+                                {
+                                    lastTag = tags[firstN - 1];
+                                    tags.RemoveRange(firstN - 1, 2);
+                                }
+                            }
+                            @foreach (var tag in tags)
                             {
                                 <a href="@Url.Search("Tags:\"" + tag + "\"")" title="Search for @tag">@tag</a>
                             }
+                            @if (lastTag != null)
+                            {
+                                <span class="text-nowrap">
+                                    <a href="@Url.Search("Tags:\"" + lastTag + "\"")" title="Search for @lastTag">@lastTag</a>
+                                    <a href="@Url.Package(Model.Id, Model.UseVersion ? Model.Version : null)" title="View more tags" class="more-tags">More tags</a>
+                                </span>
+                            }
                         </span>
                     </li>
                 }