fix(ui): Add border to final ecosystem panel (#3982)

Adds a footer bar so the last ecosystem’s tree ends on a visible
horizontal line instead of trailing off.

<img width="1546" height="958" alt="terminator"
src="https://github.com/user-attachments/assets/41149d30-9da4-46e0-a53d-c3d296011fe0"
/>

---------

Co-authored-by: Shehab <[email protected]>

Author: ashmod

gcp/website/frontend3/src/styles.scss

@@ -999,7 +999,7 @@ dl.vulnerability-details,
       }
     }
 
-.ecosystem-content-panel {
+    .ecosystem-content-panel {
       position: relative;
       padding: 8px 0 16px 16px;
 
@@ -1014,6 +1014,28 @@ dl.vulnerability-details,
         background: #555;
       }
     }
+
+    $last-ecosystem-border-offset: 12px;
+    $last-ecosystem-border-gap: 8px;
+    $last-ecosystem-border-thickness: 1px;
+
+    .ecosystem-content-panel--last {
+      padding-bottom: $last-ecosystem-border-offset + $last-ecosystem-border-gap;
+
+      &::before {
+        bottom: $last-ecosystem-border-offset + $last-ecosystem-border-thickness;
+      }
+
+      &::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: $last-ecosystem-border-offset;
+        height: $last-ecosystem-border-thickness;
+        background: $osv-grey-600;
+      }
+    }
 
     .package-accordion {
       position: relative;
@@ -1031,6 +1053,14 @@ dl.vulnerability-details,
       }
     }
 
+    .package-accordion--last {
+      margin-bottom: 0;
+
+      .package-details-card {
+        margin-bottom: $last-ecosystem-border-gap;
+      }
+    }
+
     .package-accordion h3.package-name-title {
       font-family: $osv-heading-font-family;
       font-size: 1.1rem;

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

@@ -179,12 +179,13 @@ <h2 class="title">Affected packages</h2>
     {% set ecosystems = vulnerability.affected | group_by_ecosystem %}
   <spicy-sections class="vulnerability-packages force-collapse">
     {% for ecosystem_name, packages in ecosystems.items() -%}
+      {% set is_last_ecosystem = loop.last %}
       <h2 class="package-header">
         <span class="vuln-ecosystem spicy-sections-workaround">{{ ecosystem_name }}</span>
       </h2>
-      <div class="ecosystem-content-panel">
+      <div class="ecosystem-content-panel{% if is_last_ecosystem %} ecosystem-content-panel--last{% endif %}">
         {% for affected in packages -%}
-          <spicy-sections class="package-accordion">
+          <spicy-sections class="package-accordion{% if is_last_ecosystem and loop.last %} package-accordion--last{% endif %}">
             <h3 class="package-name-title">
               {% if 'package' in affected %}{{ affected.package.name }}{% else %}{{ vulnerability.repo | strip_scheme }}{% endif %}
             </h3>
@@ -603,4 +604,4 @@ <h3 class="mdc-layout-grid__cell--span-3">
     setupExpandibleList('.expandible-list', 'li');
   });
 </script>
-{% endblock -%}
+{% endblock -%}