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:
@@ -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>
|
||||||
|
|||||||
@@ -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" }),
|
||||||
|
|||||||
Reference in New Issue
Block a user