Refine the Dependency tab rendering #286

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

Author: tdruez

dejacode/static/css/dejacode_bootstrap.css

@@ -426,19 +426,22 @@ table.vulnerabilities-table .column-summary {
 
 /* -- Dependency tab -- */
 #tab_dependencies .column-for_package {
-  width: 250px;
+  min-width: 300px;
 }
 #tab_dependencies .column-resolved_to_package {
-  width: 250px;
+  min-width: 300px;
 }
 #tab_dependencies .column-is_runtime {
-  width: 100px;
+  width: 85px;
+  font-size: 0.75rem;
 }
-#tab_dependencies .column-column-is_optional {
-  width: 100px;
+#tab_dependencies .column-is_optional {
+  width: 85px;
+  font-size: 0.75rem;
 }
-#tab_dependencies .column-column-is_pinned {
-  width: 88px;
+#tab_dependencies .column-is_pinned {
+  width: 80px;
+  font-size: 0.75rem;
 }
 
 /* -- Package Details -- */
@@ -661,7 +664,6 @@ td.sub-header {
 .table thead tr th a.sort:hover {
   color: #ccc;
   text-decoration: none;
-  margin-left: 0;
 }
 .table thead tr th a.sort.active {
   color: var(--bs-body-color);

dje/templates/includes/object_list_table_header.html

@@ -1,4 +1,5 @@
 {% load i18n %}
+{% spaceless %}
 <thead class="text-break-initial">
   <tr>
     {% if is_grouping_active %}
@@ -27,10 +28,10 @@
           {% with query_no_sort=filter.get_query_no_sort %}
             {% if filter.form.sort.data and header.field_name in filter.form.sort.data.0 %}
               {# The sort for this field is currently active #}
-              <a href="?{% if query_no_sort %}{{ query_no_sort }}&{% endif %}{% if tab_id %}{{ tab_id }}-{% endif %}sort={% if '-' not in filter.form.sort.data.0 %}-{% endif %}{{ header.field_name }}{% if tab_id %}#{{ tab_id }}{% endif %}" class="sort active" aria-label="Sort"><i class="fas fa-sort-{% if '-' not in filter.form.sort.data.0 %}up{% else %}down{% endif %}"></i></a>
+              <a href="?{% if query_no_sort %}{{ query_no_sort }}&{% endif %}{% if tab_id %}{{ tab_id }}-{% endif %}sort={% if '-' not in filter.form.sort.data.0 %}-{% endif %}{{ header.field_name }}{% if tab_id %}#{{ tab_id }}{% endif %}" class="sort active ms-1" aria-label="Sort"><i class="fas fa-sort-{% if '-' not in filter.form.sort.data.0 %}up{% else %}down{% endif %}"></i></a>
             {% else %}
               {# The sort for this field is NOT active #}
-              <a href="?{% if query_no_sort %}{{ query_no_sort }}&{% endif %}{% if tab_id %}{{ tab_id }}-{% endif %}sort={{ header.field_name }}{% if tab_id %}#{{ tab_id }}{% endif %}" class="sort" aria-label="Sort"><i class="fas fa-sort"></i></a>
+              <a href="?{% if query_no_sort %}{{ query_no_sort }}&{% endif %}{% if tab_id %}{{ tab_id }}-{% endif %}sort={{ header.field_name }}{% if tab_id %}#{{ tab_id }}{% endif %}" class="sort ms-1" aria-label="Sort"><i class="fas fa-sort"></i></a>
             {% endif %}
           {% endwith %}
         {% endif %}
@@ -40,4 +41,5 @@
       <th class="column-action" scope="col"></th>
     {% endif %}
   </tr>
-</thead>
+</thead>
+{% endspaceless %}