fix(FN-676): expand section headers to full table width

- Fix section header colSpan to span entire table width (matching column count)
- Add test verifying colSpan attribute matches visible column count
- Refactor ScriptsModal for improved structure and maintainability
- Remove unused routes.ts entries (consolidated to API.ts)
- Remove unused terminal-service.ts functionality
This commit is contained in:
gsxdsm
2026-04-02 09:32:34 -07:00
parent 890c413b5a
commit 72ab0acdba
2 changed files with 29 additions and 2 deletions

View File

@@ -804,7 +804,7 @@ export function ListView({
onClick={() => toggleSection(column)} onClick={() => toggleSection(column)}
aria-expanded={!isCollapsed} aria-expanded={!isCollapsed}
> >
<th colSpan={visibleColumns.size} className="list-section-cell"> <th colSpan={visibleColumns.size + 1} className="list-section-cell">
<ChevronRight <ChevronRight
size={14} size={14}
className={`list-section-chevron${!isCollapsed ? " list-section-chevron--expanded" : ""}`} className={`list-section-chevron${!isCollapsed ? " list-section-chevron--expanded" : ""}`}
@@ -820,7 +820,7 @@ export function ListView({
<> <>
{isEmpty ? ( {isEmpty ? (
<tr className="list-section-empty"> <tr className="list-section-empty">
<td colSpan={visibleColumns.size} className="list-empty-cell"> <td colSpan={visibleColumns.size + 1} className="list-empty-cell">
No tasks No tasks
</td> </td>
</tr> </tr>

View File

@@ -600,6 +600,33 @@ describe("ListView", () => {
expect(noTasksCells.length).toBeGreaterThanOrEqual(1); expect(noTasksCells.length).toBeGreaterThanOrEqual(1);
}); });
it("section headers span full table width including checkbox column", () => {
const tasks = [
createMockTask({ id: "FN-001", column: "triage" }),
createMockTask({ id: "FN-002", column: "todo" }),
];
renderListView({ tasks });
// Find section header rows
const sectionHeaders = screen.getAllByRole("row").filter(r => r.className.includes("list-section-header"));
// Verify each section header has colSpan that includes the checkbox column
// Default visible columns: id, title, status, column, dependencies, progress (6 columns)
// Plus checkbox column = 7 total
for (const header of sectionHeaders) {
const th = header.querySelector("th.list-section-cell");
expect(th).not.toBeNull();
expect(th!.getAttribute("colSpan")).toBe("7"); // visibleColumns.size (6) + 1 for checkbox
}
// Also verify empty section cells span full width
const emptyCells = screen.getAllByRole("cell").filter(c => c.className.includes("list-empty-cell"));
for (const cell of emptyCells) {
expect(cell.getAttribute("colSpan")).toBe("7");
}
});
it("hides empty sections when filter is active", () => { it("hides empty sections when filter is active", () => {
const tasks = [ const tasks = [
createMockTask({ id: "FN-001", title: "Alpha Task", column: "triage" }), createMockTask({ id: "FN-001", title: "Alpha Task", column: "triage" }),