mptyl/ThothII
1
0
Fork 0
Code Issues 25 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

style(frontend): tighten CTE plan vertical rhythm

Browse Source
This commit is contained in:
User
2026-07-15 15:15:56 +02:00
parent d177e1c0af
commit f1af1f909b
2 changed files with 41 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/viewers/CtePlanViewer.test.tsx
+17 -20
View File
@@ -68,19 +68,15 @@ test("renders strategy, question, and a chain strip with CTE names in order", ()
expect(screen.getAllByText("impianti_recenti").length).toBeGreaterThan(0);
});
test("uses compact vertical and responsive lateral CTE card padding", () => {
test("uses compact CTE section rhythm with moderate lateral padding", () => {
const { container } = render(<CtePlanViewer plan={plan} />);
for (const header of container.querySelectorAll('[data-slot="card-header"]')) {
expect(header).toHaveClass("px-3", "py-2", "sm:px-4", "[&.border-b]:pb-2");
expect(header).not.toHaveClass("p-4", "sm:p-5", "sm:[&.border-b]:pb-5");
expect(header).toHaveClass("gap-2", "px-3", "py-2", "sm:px-4", "[&.border-b]:pb-2");
expect(header).not.toHaveClass("gap-3", "p-4", "sm:p-5");
}
for (const content of container.querySelectorAll('[data-slot="card-content"]')) {
expect(content).toHaveClass("px-3", "py-2", "sm:px-4");
expect(content).not.toHaveClass("p-4", "sm:p-5");
}
for (const card of container.querySelectorAll('[data-slot="card"]')) {
expect(card).toHaveClass("shadow-none");
expect(content).toHaveClass("gap-3", "px-3", "py-2", "sm:px-4");
expect(content).not.toHaveClass("gap-5", "p-4", "sm:p-5");
}
});
@@ -142,7 +138,7 @@ test("groups filters in one bordered divided list with accessible padded rows",
expect(list).toHaveClass("border", "divide-y");
for (const filter of filters) {
expect(filter.parentElement).toBe(list);
expect(filter).toHaveClass("px-3", "py-2", "sm:px-4");
expect(filter).toHaveClass("px-3", "py-1", "sm:px-4");
expect(filter).not.toHaveClass("p-3", "sm:p-4");
}
lists.push(list!);
@@ -161,22 +157,23 @@ test("renders rationale as a plain top-divided section", () => {
expect(rationale).not.toHaveClass("border-l-2", "bg-primary/5", "rounded-lg");
});
test("uses the same compact padding for table rows and rationale dividers", () => {
test("compacts table, filter, detail, and rationale rows", () => {
render(<CtePlanViewer plan={plan} />);
const card = getCteCard("pazienti_idonei");
const tableName = within(card).getByText("pazienti");
expect(tableName.parentElement).toHaveClass("px-3", "py-2", "sm:px-4");
expect(tableName.parentElement).not.toHaveClass("p-3", "sm:p-4");
const tableRow = within(card).getByText("pazienti").parentElement;
expect(tableRow).toHaveClass("px-3", "py-1", "sm:px-4");
const filterRationale = within(card).getByText("Solo pazienti in follow-up").parentElement;
expect(filterRationale).toHaveClass("pt-2");
expect(filterRationale).not.toHaveClass("pt-3");
const filter = within(card).getByRole("group", { name: "Filter 1" });
expect(filter).toHaveClass("space-y-2", "px-3", "py-1", "sm:px-4");
expect(filter.firstElementChild).toHaveClass("gap-2");
const filterDetails = within(card).getByText("Solo pazienti in follow-up").parentElement;
expect(filterDetails).toHaveClass("gap-y-1", "pt-1");
const cteRationale = within(card)
const rationale = within(card)
.getByText("Base della catena: riduce il volume prima dei join")
.closest("section");
expect(cteRationale).toHaveClass("border-t", "pt-2");
expect(cteRationale).not.toHaveClass("pt-4");
expect(rationale).toHaveClass("pt-1");
expect(within(rationale!).getByText("Rationale")).toHaveClass("mb-1");
});
test("shows 'no dependencies' for a CTE with an empty depends_on", () => {