Improve column alignment by using single table layout

src/main/resources/lib/categorizedview/catProjectViewRow.jelly

@@ -54,11 +54,6 @@ THE SOFTWARE.
         <st:nbsp/>
       </td>
     </tr>
-    <tr id="jobNestedItems_${job.name}" class="${view.getGroupClassFor(job)} categoryJobs" category="${job.name}" categoryRole="child">
-      <td><st:nbsp/></td>
-      <td colspan="${columnExtensions.size()+1}" class="categoryJobsColumn">
-        <c:nestedProjectsView jobs="${job.groupItems}" />
-      </td>
-    </tr>
+    <c:nestedProjectsView parentJob="${job}" jobs="${job.groupItems}" />
   </j:if>
 </j:jelly>

src/main/resources/lib/categorizedview/nestedProjectsView.jelly

@@ -28,28 +28,29 @@ THE SOFTWARE.
   <st:documentation>
     Renders a list of grouped jobs.
 
+    <st:attribute name="parentJob" use="required">
+      Parent item.
+    </st:attribute>
     <st:attribute name="jobs" use="required" trim="Collection">
       Items to show.
     </st:attribute>
   </st:documentation>
 
-  <div class="dashboard">
-    <j:if test="${!empty(jobs) or !empty(attrs.views)}">
-      <!-- project list -->
-      <table id="projectstatus_${job.name}" class="pane bigtable">
-        <j:forEach var="job" items="${jobs}">
-          <j:set var="relativeLinkToJob" value="${h.getRelativeLinkTo(job)}"/>
-          <j:set var="jobBaseUrl" value="${relativeLinkToJob.substring(0, relativeLinkToJob.length() - job.shortUrl.length())}"/>
-          <tr id="job_${job.name}" class="${job.disabled?'disabledJob':null}">
-            <j:forEach var="col" items="${columnExtensions}">
-              <st:include page="column.jelly" it="${col}"/>
-            </j:forEach>
-            <td>
-              <st:nbsp/>
-            </td>
-          </tr>
+  <j:if test="${!empty(jobs) or !empty(attrs.views)}">
+    <j:forEach var="job" items="${jobs}">
+      <j:set var="relativeLinkToJob" value="${h.getRelativeLinkTo(job)}"/>
+      <j:set var="jobBaseUrl" value="${relativeLinkToJob.substring(0, relativeLinkToJob.length() - job.shortUrl.length())}"/>
+      <tr id="job_${job.name}" class="${job.disabled?'disabledJob':null} ${view.getGroupClassFor(parentJob)} childJobRow" category="${parentJob.name}" categoryRole="child" data-jobgroup="${view.getGroupClassFor(parentJob)}">
+        <td>
+          <st:nbsp/>
+        </td>
+        <j:forEach var="col" items="${columnExtensions}">
+          <st:include page="column.jelly" it="${col}"/>
         </j:forEach>
-      </table>
-    </j:if>
-  </div>
+        <td>
+          <st:nbsp/>
+        </td>
+      </tr>
+    </j:forEach>
+  </j:if>
 </j:jelly>

src/main/resources/org/jenkinsci/plugins/categorizedview/IndentedJobColumn/column.jelly

@@ -26,7 +26,11 @@ THE SOFTWARE.
 <j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define" xmlns:l="/lib/layout" xmlns:t="/lib/hudson" xmlns:f="/lib/form" xmlns:i="jelly:fmt">
 <j:if test="${!view.isGroupTopLevelItem(job)}">
     <td style="${indenter.getCss(job)}">
-        <a href="${rootURL}/${job.url}" class='jenkins-table__link model-link inside'> <l:breakable value="${h.getRelativeDisplayNameFrom(job, itemGroup)}"/></a>
+        <a href="${rootURL}/${job.url}" class='jenkins-table__link model-link inside'>
+            <span>
+                <l:breakable value="${h.getRelativeDisplayNameFrom(job, itemGroup)}"/>
+            </span>
+        </a>
     </td>
 </j:if>
 <j:if test="${view.isGroupTopLevelItem(job)}">

src/main/webapp/catSortable.css

@@ -5,26 +5,11 @@ tr.categoryJobRow {
   cursor: pointer;
 }
 
-.jenkins-table > tbody > tr > td.categoryJobsColumn {
-  padding-left: 2em; 
-  padding-top: 0; 
-  padding-bottom: 0;
+tr.childJobRow > td:first-of-type {
+  visibility: hidden;
 }
 
-td.categoryJobsColumn > div.dashboard > table > tbody > tr {
-  border-bottom: 0;
+tr.childJobRow > td:nth-of-type(2) {
+  border-bottom-left-radius: var(--table-row-border-radius);
+  border-top-left-radius: var(--table-row-border-radius);
 }
-
-td.categoryJobsColumn > div.dashboard > table > tbody > tr > td {
-  font-weight: 500;
-  border-bottom: 0;
-}
-
-td.categoryJobsColumn > div.dashboard > table > tbody > tr:first-child > td {
-  border-top: 0;
-}
-
-td.categoryJobsColumn > div.dashboard > table > tbody > tr > td {
-  border-top: 2px solid var(--table-background);
-}
-

src/main/webapp/catSortable.js

@@ -212,10 +212,7 @@ var CategorizedSortable = (function () {
                 var aCategory = a.getAttribute("category");
                 var bCategory = b.getAttribute("category");
                 if (aCategory != null && aCategory == bCategory) {
-                    if (a.getAttribute("categoryRole") == "category")
-                        return -1;
-                    else
-                        return 1;
+                    return -1;
                 }
 
                 return s(this.extractData(aCell),
@@ -233,8 +230,9 @@ var CategorizedSortable = (function () {
         },
 
         getCell: function (a, columnNumber) {
-            if (a.id.match(/^jobNestedItems_/)) {
-                var groupId = "category_" + a.id.replace(/^jobNestedItems_/, "");
+            if (a.id.match(/^job_/)) {
+                var groupId = "category_" + a.getAttribute("category");
+                console.log("GROUP ID " + groupId);
                 var categoryRow = document.getElementById(groupId);
                 return categoryRow.cells[columnNumber]
             }