Collapse related field by it is too long

gcp/appengine/frontend3/src/styles.scss

@@ -867,6 +867,11 @@ dl.vulnerability-details,
   }
 }
 
+.showmore {
+	cursor: pointer;
+	font-weight: bold;
+}
+
 /** Home page */
 
 .wrapper.decorated {

gcp/appengine/frontend3/src/templates/vulnerability.html

@@ -38,7 +38,7 @@ <h1 class="title">{{ vulnerability.id }}</h1>
           {% if vulnerability.related -%}
           <dt>Related</dt>
           <dd>
-            <ul class="aliases">
+            <ul class="aliases expandible-list">
               {% for related in vulnerability.related -%}
               <li>
                 {% if related | osv_has_vuln -%}
@@ -242,5 +242,36 @@ <h3 class="mdc-layout-grid__cell--span-3">
       header.click()
     });
   })
+
+  const EXPANDIBLE_LIST_DEFAULT_LENGTH = 5
+
+  const expandible_lists = document.querySelectorAll('.expandible-list')
+  expandible_lists.forEach((list) => {
+    const items = list.getElementsByTagName('li')
+    const is_expanded = list.classList.contains('expanded');
+
+    if (items.length <= EXPANDIBLE_LIST_DEFAULT_LENGTH) {
+      return
+    }
+
+    const expandible_items = [...items].slice(EXPANDIBLE_LIST_DEFAULT_LENGTH)
+    expandible_items.forEach((item)=>{
+      item.style.display = is_expanded ? 'block' : 'none'
+    });
+
+    const toggle_button = document.createElement('span');
+    toggle_button.classList.add('showmore');
+    toggle_button.textContent = is_expanded ? 'Show Less' : 'Show More';
+    list.append(toggle_button)
+
+    toggle_button.addEventListener("click", function() {
+      const is_expanded = list.classList.contains('expanded');
+      expandible_items.forEach((item)=>{
+        item.style.display = is_expanded ? 'none' : 'block'
+      });
+      toggle_button.textContent = is_expanded ? 'Show More' : 'Show Less'
+      list.classList.toggle('expanded');
+    });
+  });
 </script>
 {% endblock -%}