From 6ac60623d9715466ae7cfd5b46227245d41f2b74 Mon Sep 17 00:00:00 2001
From: "John M. Horan" <johnmhoran@gmail.com>
Date: Wed, 6 Sep 2023 17:16:56 -0700
Subject: [PATCH] Add sticky div to Package details template #1263

Reference: https://github.com/nexB/vulnerablecode/issues/1263

Signed-off-by: John M. Horan <johnmhoran@gmail.com>
---
 vulnerabilities/templates/package_details.html |  4 ++--
 vulnerablecode/static/css/custom.css           | 16 ++++++++++++++++
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/vulnerabilities/templates/package_details.html b/vulnerabilities/templates/package_details.html
index 6a391d3d3..3956af2ce 100644
--- a/vulnerabilities/templates/package_details.html
+++ b/vulnerabilities/templates/package_details.html
@@ -20,11 +20,11 @@
                 </div>
             </article>
 
-            <div class="pl-3 pr-3 mb-5">
+            <div class="pl-3 pr-3 mb-5 floating-purl">
                 <table class="table vcio-table width-100-pct mt-2">
                     <tbody>
                         <tr>
-                            <td class="two-col-left">
+                            <td class="two-col-left" style="width: 175px;">
                                 <span
                                     class="has-tooltip-multiline has-tooltip-black has-tooltip-arrow has-tooltip-text-left"
                                     data-tooltip="The package url or purl is a URL string used to identify and locate a software package."
diff --git a/vulnerablecode/static/css/custom.css b/vulnerablecode/static/css/custom.css
index c93338054..b80ba3257 100644
--- a/vulnerablecode/static/css/custom.css
+++ b/vulnerablecode/static/css/custom.css
@@ -367,3 +367,19 @@ a.small_page_button {
 span.tag.custom {
     margin: 0px 0px 6px 10px;
 }
+
+/* Floating container to display the PURL on the Package details page as the user scrolls down. */
+.floating-purl {
+    position: sticky;
+    top: 0;
+    width: 100%;
+    z-index: 100;
+    margin-bottom: 0px;
+}
+
+.floating-purl .table td,
+.floating-purl .table tbody tr:last-child td,
+.floating-purl .table th {
+    border: solid 1px #dbdbdb;
+    background-color: #ffffff;
+}