From 21450ea0eb9c54725980e254ceada6e39f0bf050 Mon Sep 17 00:00:00 2001
From: Rene Fichtmueller <renefichtmueller@MacBook-Pro-von-Rene.local>
Date: Thu, 26 Mar 2026 14:17:42 +1300
Subject: [PATCH] feat: collapsible providers list + scrollable ASPA template

---
 deploy/public/index.html | 24 ++++++++++++++++++------
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/deploy/public/index.html b/deploy/public/index.html
index 10fcb00..2ec9e96 100644
--- a/deploy/public/index.html
+++ b/deploy/public/index.html
@@ -626,21 +626,33 @@ function renderAspa(d) {
   h += '</div>';
   h += '</div>';
 
-  // Detected providers
+  // Detected providers (collapsible after 10)
   if (d.detected_providers && d.detected_providers.length > 0) {
-    h += '<div style="font-size:.8rem;font-weight:600;color:var(--orange);margin:.75rem 0 .4rem">Detected Upstream Providers</div>';
-    h += '<div style="display:flex;flex-wrap:wrap;gap:.3rem;margin-bottom:1rem">';
-    d.detected_providers.forEach(function(p) {
+    var provLimit = 10;
+    var provList = d.detected_providers;
+    h += '<div style="font-size:.8rem;font-weight:600;color:var(--orange);margin:.75rem 0 .4rem">Detected Upstream Providers (' + provList.length + ')</div>';
+    h += '<div style="display:flex;flex-wrap:wrap;gap:.3rem;margin-bottom:.25rem">';
+    provList.slice(0, provLimit).forEach(function(p) {
       var nameStr = (p.name && p.name !== 'AS' + p.asn) ? ' ' + escHtml(p.name) : '';
       h += '<span class="badge badge-orange">' + asnLink(p.asn) + nameStr + '</span>';
     });
     h += '</div>';
+    if (provList.length > provLimit) {
+      var provMoreId = 'provMore' + Date.now();
+      h += '<div id="' + provMoreId + '" style="display:none;flex-wrap:wrap;gap:.3rem;margin-bottom:.25rem">';
+      provList.slice(provLimit).forEach(function(p) {
+        var nameStr = (p.name && p.name !== 'AS' + p.asn) ? ' ' + escHtml(p.name) : '';
+        h += '<span class="badge badge-orange">' + asnLink(p.asn) + nameStr + '</span>';
+      });
+      h += '</div>';
+      h += '<div class="show-more-btn" onclick="var el=document.getElementById(\'' + provMoreId + '\');if(el.style.display===\'none\'){el.style.display=\'flex\';this.textContent=\'Hide ' + (provList.length - provLimit) + ' providers\';}else{el.style.display=\'none\';this.textContent=\'Show ' + (provList.length - provLimit) + ' more providers...\';}">Show ' + (provList.length - provLimit) + ' more providers...</div>';
+    }
   }
 
-  // Recommended ASPA template
+  // Recommended ASPA template (scrollable, max 200px)
   if (d.recommended_aspa) {
     h += '<div style="font-size:.8rem;font-weight:600;color:var(--cyan);margin:.75rem 0 .4rem">Recommended ASPA Object</div>';
-    h += '<div class="aspa-template" id="aspaTemplate">' + escHtml(d.recommended_aspa);
+    h += '<div class="aspa-template" id="aspaTemplate" style="max-height:200px;overflow-y:auto">' + escHtml(d.recommended_aspa);
     h += '<button class="copy-btn" onclick="copyToClipboard(document.getElementById(\'aspaTemplate\').innerText, this)">Copy</button>';
     h += '</div>';
   }