Adjust the resource tree view table rendering #1840

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

Author: tdruez

scanpipe/templates/scanpipe/panels/codebase_tree_panel.html

@@ -2,7 +2,7 @@
   {% for node in children %}
     <li>
       {% if node.is_dir %}
-        <div class="tree-node is-flex is-align-items-center has-text-weight-semibold px-1" data-folder data-path="{{ node.path }}"{% if node.has_children %} data-target="{{ node.path|slugify }}" data-url="{% url 'codebase_resource_tree' slug=project.slug %}?path={{ node.path }}"{% endif %}>
+        <div class="tree-node is-flex is-align-items-center px-1" data-folder data-path="{{ node.path }}"{% if node.has_children %} data-target="{{ node.path|slugify }}" data-url="{% url 'codebase_resource_tree' slug=project.slug %}?path={{ node.path }}"{% endif %}>
           <span class="icon is-small chevron mr-1{% if not node.has_children %} is-invisible{% endif %} is-clickable is-flex is-align-items-center" data-chevron>
             <i class="fas fa-chevron-right"></i>
           </span>

scanpipe/templates/scanpipe/panels/resource_table_panel.html

@@ -23,7 +23,7 @@
 
 <div class="table-scroll-area">
   {% if resources %}
-    <table class="table is-bordered is-striped is-narrow is-fullwidth">
+    <table class="table is-bordered is-hoverable is-fullwidth">
       <thead class="is-sticky">
           <tr>
             <th>Name</th>
@@ -39,18 +39,22 @@
                 data-path="{{ parent_path }}"
                 hx-get="{% url 'codebase_resource_table' project.slug %}{% if parent_path %}?path={{ parent_path }}{% endif %}"
                 hx-target="#right-pane"
-                hx-push-url="{% url 'codebase_resource_tree' project.slug %}{% if parent_path %}?path={{ parent_path }}{% endif %}">
-              <td class="is-align-items-center break-all" colspan="5" style="min-width: 100px;">
-                <span class="icon is-small mr-2">
-                  <i class="fas fa-folder"></i>
-                </span>
-                <span class="has-text-weight-medium">..</span>
+                hx-push-url="{% url 'codebase_resource_tree' project.slug %}{% if parent_path %}?path={{ parent_path }}{% endif %}"
+            >
+              <td colspan="5">
+                <div class="is-flex is-align-items-center">
+                  <span class="icon is-small mr-2">
+                    <i class="fas fa-folder"></i>
+                  </span>
+                  <span class="has-text-weight-semibold">..</span>
+                </div>
               </td>
             </tr>
           {% endif %}
           {% for resource in resources %}
             <tr>
-              <td class="is-flex is-align-items-center break-all" style="min-width: 100px;">
+              <td class="break-all" style="min-width: 100px;">
+                <div class="is-flex is-align-items-center">
                   <span class="icon is-small mr-2">
                     {% if resource.is_dir %}
                       <i class="fas fa-folder"></i>
@@ -66,6 +70,7 @@
                   {% if resource.tag %}
                     <span class="tag is-rounded ml-2">{{ resource.tag }}</span>
                   {% endif %}
+                </div>
               </td>
               <td>
                 {{ resource.status }}