From 14d0eeeb462bfef0c7b7c52cb48d4ca121908c84 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Thu, 30 Jul 2026 15:49:30 +0200
Subject: [PATCH] fix(ui): stop CardHeader drawing a phantom gap without a
 description
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

grid-rows-[auto_auto] was unconditional, so a header with a title and
no CardDescription still reserved an empty second row track and drew
the gap-2 for it — 32px instead of the intended 24px between heading
and body on desktop. Make the second row conditional on a description
being present, and widen CardAction to row-span-full so it still
tracks the header's row count when an action lands in a
description-less card.

Also correct two assessment cards that had drifted onto gap-1.5
instead of the sanctioned gap-2 compact tier.
---
 src/app/insights/__tests__/assessment-spine-order.test.ts     | 4 ++--
 .../insights/__tests__/insight-status-card.test.tsx           | 2 +-
 src/components/insights/insight-status-card.tsx               | 4 ++--
 src/components/insights/mood/mood-insights-sections.tsx       | 4 ++--
 src/components/ui/card.tsx                                    | 4 ++--
 5 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/app/insights/__tests__/assessment-spine-order.test.ts b/src/app/insights/__tests__/assessment-spine-order.test.ts
index dd121c8a5..66fb9f720 100644
--- a/src/app/insights/__tests__/assessment-spine-order.test.ts
+++ b/src/app/insights/__tests__/assessment-spine-order.test.ts
@@ -176,11 +176,11 @@ describe("assessment presentation contract", () => {
     );
 
     expect(cardSource).toContain(
-      'className="animate-insight-in gap-1.5 py-3 md:py-4"',
+      'className="animate-insight-in gap-2 py-3 md:py-4"',
     );
     expect(cardSource).toContain('className="text-foreground text-sm"');
     expect(moodSource).toContain(
-      'className="animate-insight-in gap-1.5 py-3 md:py-4"',
+      'className="animate-insight-in gap-2 py-3 md:py-4"',
     );
     expect(moodSource).toContain('data-slot="insight-assessment"');
     expect(moodBodySource).toContain(
diff --git a/src/components/insights/__tests__/insight-status-card.test.tsx b/src/components/insights/__tests__/insight-status-card.test.tsx
index 85ac75a17..b4f723c17 100644
--- a/src/components/insights/__tests__/insight-status-card.test.tsx
+++ b/src/components/insights/__tests__/insight-status-card.test.tsx
@@ -188,7 +188,7 @@ describe("<InsightStatusCard>", () => {
       expect(html).toContain("py-3");
       expect(html).toContain("md:py-4");
     }
-    expect(populated).toContain("gap-1.5");
+    expect(populated).toContain("gap-2");
     expect(populated).toContain("space-y-1.5");
     expect(populated).toContain("py-3");
     expect(populated).toContain("md:py-4");
diff --git a/src/components/insights/insight-status-card.tsx b/src/components/insights/insight-status-card.tsx
index 82c9b2f11..df7e84c5b 100644
--- a/src/components/insights/insight-status-card.tsx
+++ b/src/components/insights/insight-status-card.tsx
@@ -264,7 +264,7 @@ export function InsightStatusCard({
       // v1.12.2 — stable hook for the spine guard test, which asserts the
       // assessment is the LAST content block on every bespoke metric page.
       data-slot="insight-assessment"
-      // Compact card density (`gap-1.5 py-3 md:py-4`) — the sanctioned tight
+      // Compact card density (`gap-2 py-3 md:py-4`) — the sanctioned tight
       // tier, so the assessment shares one header→body rhythm with the
       // target summary, the read strip, and the stat strip on the same
       // spine. Earlier bespoke values (`gap-1.5` + `md:py-5`) predate the
@@ -272,7 +272,7 @@ export function InsightStatusCard({
       // lands on every status variant so the gap is consistent across
       // states. (The one-time purple left accent stays dropped — the plain
       // card border carries enough separation.)
-      className="animate-insight-in gap-1.5 py-3 md:py-4"
+      className="animate-insight-in gap-2 py-3 md:py-4"
     >
       <CardHeader>
         {/* v1.11.5 — the top-right "cached" label was removed: it surfaced
diff --git a/src/components/insights/mood/mood-insights-sections.tsx b/src/components/insights/mood/mood-insights-sections.tsx
index 054bc861a..de4e6c7d4 100644
--- a/src/components/insights/mood/mood-insights-sections.tsx
+++ b/src/components/insights/mood/mood-insights-sections.tsx
@@ -285,10 +285,10 @@ export function MoodInsightsSections({
       <Card
         aria-live="polite"
         data-slot="insight-assessment"
-        // v1.13.1 — match the canonical `gap-1.5` + `pb-1` heading-to-body
+        // v1.13.1 — match the canonical `gap-2` + `pb-1` heading-to-body
         // rhythm the other assessment cards use, so the heading sits tight
         // above its body instead of floating ~16-24 px above it.
-        className="animate-insight-in gap-1.5 py-3 md:py-4"
+        className="animate-insight-in gap-2 py-3 md:py-4"
       >
         <CardHeader>
           <TileHeader
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
index 5db913006..faca2edf7 100644
--- a/src/components/ui/card.tsx
+++ b/src/components/ui/card.tsx
@@ -33,7 +33,7 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card-header"
       className={cn(
-        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto] md:px-6 [.border-b]:pb-4 md:[.border-b]:pb-6",
+        "@container/card-header grid auto-rows-min items-start gap-2 px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] md:px-6 [.border-b]:pb-4 md:[.border-b]:pb-6",
         className,
       )}
       {...props}
@@ -66,7 +66,7 @@ function CardAction({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card-action"
       className={cn(
-        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        "col-start-2 row-span-full row-start-1 self-start justify-self-end",
         className,
       )}
       {...props}