diff --git a/frontend/src/viewers/CtePlanViewer.test.tsx b/frontend/src/viewers/CtePlanViewer.test.tsx
index 7b50b3d3..925513a7 100644
--- a/frontend/src/viewers/CtePlanViewer.test.tsx
+++ b/frontend/src/viewers/CtePlanViewer.test.tsx
@@ -68,21 +68,16 @@ test("renders strategy, question, and a chain strip with CTE names in order", ()
   expect(screen.getAllByText("impianti_recenti").length).toBeGreaterThan(0);
 });
 
-test("uses semantic CTE headings and explicit responsive card padding", () => {
+test("uses compact vertical and responsive lateral CTE card padding", () => {
   const { container } = render(<CtePlanViewer plan={plan} />);
 
-  expect(screen.getByRole("heading", { level: 3, name: "pazienti_idonei" })).toBeInTheDocument();
-
   for (const header of container.querySelectorAll('[data-slot="card-header"]')) {
-    expect(header).toHaveClass(
-      "p-4",
-      "sm:p-5",
-      "[&.border-b]:pb-4",
-      "sm:[&.border-b]:pb-5"
-    );
+    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");
   }
   for (const content of container.querySelectorAll('[data-slot="card-content"]')) {
-    expect(content).toHaveClass("p-4", "sm:p-5");
+    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");
@@ -147,7 +142,8 @@ 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("p-3", "sm:p-4");
+      expect(filter).toHaveClass("px-3", "py-2", "sm:px-4");
+      expect(filter).not.toHaveClass("p-3", "sm:p-4");
     }
     lists.push(list!);
   }
@@ -161,10 +157,28 @@ test("renders rationale as a plain top-divided section", () => {
   const rationale = screen
     .getByText("Base della catena: riduce il volume prima dei join")
     .closest("section");
-  expect(rationale).toHaveClass("border-t", "pt-4");
+  expect(rationale).toHaveClass("border-t");
   expect(rationale).not.toHaveClass("border-l-2", "bg-primary/5", "rounded-lg");
 });
 
+test("uses the same compact padding for table rows and rationale dividers", () => {
+  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 filterRationale = within(card).getByText("Solo pazienti in follow-up").parentElement;
+  expect(filterRationale).toHaveClass("pt-2");
+  expect(filterRationale).not.toHaveClass("pt-3");
+
+  const cteRationale = 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");
+});
+
 test("shows 'no dependencies' for a CTE with an empty depends_on", () => {
   render(<CtePlanViewer plan={plan} />);
   expect(screen.getByText(/no dependencies/i)).toBeInTheDocument();
diff --git a/frontend/src/viewers/CtePlanViewer.tsx b/frontend/src/viewers/CtePlanViewer.tsx
index 5fcb9dc8..4e95c051 100644
--- a/frontend/src/viewers/CtePlanViewer.tsx
+++ b/frontend/src/viewers/CtePlanViewer.tsx
@@ -16,7 +16,7 @@ function FilterRow({ filter, index }: { filter: CtePlanFilter; index: number })
     <div
       role="group"
       aria-label={`Filter ${index}`}
-      className="min-w-0 space-y-3 p-3 sm:p-4"
+      className="min-w-0 space-y-3 px-3 py-2 sm:px-4"
     >
       <div className="grid min-w-0 grid-cols-1 gap-3 md:grid-cols-[minmax(0,1fr)_minmax(5rem,auto)_minmax(0,1fr)]">
         <div className="min-w-0 space-y-1">
@@ -39,7 +39,7 @@ function FilterRow({ filter, index }: { filter: CtePlanFilter; index: number })
         </div>
       </div>
       {(filter.description || filter.rationale) && (
-        <div className="grid min-w-0 gap-x-4 gap-y-2 border-t border-border/50 pt-3 md:grid-cols-[5.5rem_minmax(0,1fr)]">
+        <div className="grid min-w-0 gap-x-4 gap-y-2 border-t border-border/50 pt-2 md:grid-cols-[5.5rem_minmax(0,1fr)]">
           {filter.description && (
             <>
               <span className={FIELD_LABEL}>Description</span>
@@ -67,7 +67,7 @@ function CteCard({ cte, total }: { cte: CtePlanCte; total: number }) {
 
   return (
     <Card className="gap-0 rounded-lg border py-0 shadow-none">
-      <CardHeader className="gap-3 rounded-t-lg border-b border-border/60 bg-muted/15 p-4 sm:p-5 sm:[&.border-b]:pb-5">
+      <CardHeader className="gap-3 rounded-t-lg border-b border-border/60 bg-muted/15 px-3 py-2 sm:px-4 [&.border-b]:pb-2">
         <div className="grid min-w-0 grid-cols-[auto_minmax(0,1fr)] items-center gap-2.5">
           <Badge variant="outline" className="font-mono">
             CTE {cte.index}/{total}
@@ -82,7 +82,7 @@ function CteCard({ cte, total }: { cte: CtePlanCte; total: number }) {
           </p>
         )}
       </CardHeader>
-      <CardContent className="flex min-w-0 flex-col gap-5 p-4 sm:p-5">
+      <CardContent className="flex min-w-0 flex-col gap-5 px-3 py-2 sm:px-4">
         <div className="grid min-w-0 gap-4 md:grid-cols-2">
           <section className="min-w-0">
             <h4 className="thot-label mb-2">Depends on</h4>
@@ -116,7 +116,7 @@ function CteCard({ cte, total }: { cte: CtePlanCte; total: number }) {
               {cte.tables.map((table) => (
                 <div
                   key={table.name}
-                  className="grid min-w-0 gap-1 p-3 sm:p-4 md:grid-cols-[minmax(10rem,0.8fr)_minmax(0,1.2fr)] md:gap-4"
+                  className="grid min-w-0 gap-1 px-3 py-2 sm:px-4 md:grid-cols-[minmax(10rem,0.8fr)_minmax(0,1.2fr)] md:gap-4"
                 >
                   <code className="min-w-0 whitespace-pre-wrap [overflow-wrap:anywhere] font-mono text-xs leading-relaxed text-foreground">
                     {table.name}
@@ -155,7 +155,7 @@ function CteCard({ cte, total }: { cte: CtePlanCte; total: number }) {
         )}
 
         {cte.rationale && (
-          <section className="min-w-0 border-t border-border/60 pt-4">
+          <section className="min-w-0 border-t border-border/60 pt-2">
             <h4 className="thot-label mb-1.5">Rationale</h4>
             <p className="whitespace-pre-wrap [overflow-wrap:anywhere] text-sm leading-relaxed text-foreground/90">
               {cte.rationale}