Add sticky div to Package details template #1263 (#1294)

Reference: #1263

Signed-off-by: John M. Horan <[email protected]>

Author: johnmhoran

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."

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;
+}