[A11y] Prevent hidden text when increasing text spacing (#8796)

Content in the Used By section gets incorrectly hidden when increasing the spacing in text. This fixes the accessibility bug by using `clamp.js` to clamp text. Note that this bug affects both the old and new designs, however, this fix only targets the redesign.

See WCAG 2.1 requirement: https://www.w3.org/TR/WCAG21/#text-spacing

Part of #8790

Author: loic-sharma

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

@@ -274,25 +274,14 @@
     font-size: 14px;
     color: #333333;
     margin: 4px 0 0 0;
-    width: auto;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
     line-height: 16px;
-    /* fallback */
-    max-height: 32px;
-    /* fallback */
-    -webkit-line-clamp: 2;
-    /* number of lines to show */
-    -webkit-box-orient: vertical;
   }
 
   .used-by-link {
     font-family: @font-family-base;
     font-size: 16px;
     line-height: 19px;
     color: @brand-primary;
-    width: auto;
   }
 
   .gh-link, .ngp-link {

src/Bootstrap/less/theme/page-display-package-v2.less

@@ -110,6 +110,24 @@
         }
     }
 
+    var usedByClamped = false;
+    var usedByTab = $('#usedby-tab');
+
+    function clampUsedByDescriptions() {
+        // Clamp long descriptions in the "used by" tab. Ensure this runs only once,
+        // otherwise clamp.js removes too much content.
+        if (usedByClamped) return;
+        if (!usedByTab.hasClass('active')) return;
+
+        for (var usedByDescription of $('.used-by-desc').get()) {
+            $clamp(usedByDescription, { clamp: 2, useNativeClamp: false });
+        }
+
+        usedByClamped = true;
+    }
+
+    clampUsedByDescriptions();
+
     // Make sure we save the user's preferred body tab to localStorage.
     $('.package-manager-tab').on('shown.bs.tab', function (e) {
         if (storage) {
@@ -128,6 +146,8 @@
             storage.setItem(bodyStorageKey, e.target.id);
         }
 
+        clampUsedByDescriptions();
+
         window.nuget.sendMetric("ShowDisplayPackageTab", 1, {
             TabId: e.target.id,
             PackageId: packageId,

src/NuGetGallery/Scripts/gallery/page-display-package-v2.js

@@ -707,13 +707,11 @@
                                                         @if (item.IsVerified)
                                                         {
                                                             <img class="reserved-indicator"
-                                                                    src="~/Content/gallery/img/reserved-indicator.svg"
-                                                                    @ViewHelpers.ImageFallback(Url.Absolute("~/Content/gallery/img/reserved-indicator-14x14.png"))
-                                                                    title="@Strings.ReservedNamespace_ReservedIndicatorTooltip" />
+                                                                 src="~/Content/gallery/img/reserved-indicator.svg"
+                                                                 @ViewHelpers.ImageFallback(Url.Absolute("~/Content/gallery/img/reserved-indicator-14x14.png"))
+                                                                 title="@Strings.ReservedNamespace_ReservedIndicatorTooltip" />
                                                         }
-                                                        <div class="row used-by-desc">
-                                                            <span>@(item.Description)</span>
-                                                        </div>
+                                                        <p class="used-by-desc">@item.Description</p>
                                                     </td>
                                                     <td>
                                                         <i class="ms-Icon ms-Icon--Download used-by-download-icon" aria-hidden="true"></i> <label class="used-by-count">@(item.DownloadCount.ToKiloFormat())</label>