Make the header row of tables sticky to the top of the screen #1457 (#1458)

Signed-off-by: tdruez <tdruez@nexb.com>

Author: tdruez

CHANGELOG.rst

@@ -17,6 +17,10 @@ v34.9.1 (unreleased)
   Use a list of pipeline names instead.
   https://github.com/aboutcode-org/scancode.io/issues/1454
 
+- Make the header row of tables sticky to the top of the screen so it is always
+  visible.
+  https://github.com/aboutcode-org/scancode.io/issues/1457
+
 v34.9.0 (2024-11-14)
 --------------------
 

scanpipe/templates/scanpipe/base.html

@@ -39,6 +39,7 @@
       .is-grey-link {color: #7a7a7a;}
       .is-black-link:hover, .is-grey-link:hover {color: #3273dc; text-decoration: underline;}
       .navbar button.navbar-item {font-size: 1em;}
+      thead.is-sticky {position: sticky; top: -1px; z-index: 100; background-color: #fff;}
       #inputs-panel .panel-block.dropdown:hover {background-color: #f5f5f5;}
       #inputs-panel .dropdown-menu {width: 85%;}
       a.panel-block {word-break: break-all;}

scanpipe/templates/scanpipe/includes/list_view_thead.html

@@ -1,4 +1,4 @@
-<thead>
+<thead class="is-sticky">
   <tr>
     {% if select_all %}
       <th class="p-2">