From 21b65788ae6b4beef9c3352739c288954b807cbd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Sun, 5 Jul 2026 16:29:34 +0200
Subject: [PATCH] fix(ui): drop stale padding-era overrides on CardHeader and
 CardContent

The Card has been a gap-based flex column since v1.4.33 (gap-4 md:gap-6;
CardHeader carries no bottom padding), but 29 CardHeader pb-0/1/2/2.5 and
8 CardContent pt-6 overrides from the padding-era shadcn card survived.
Under the gap model they invert their intent: pb-* renders gap PLUS
padding (looser, not tighter), pb-0 is a no-op, and pt-6 on a header-less
CardContent stacks on the Card's own py-4/6 and makes the card top-heavy
(40-48 px top vs 16-24 px bottom). Delete them all; a genuinely tighter
header-to-body distance is expressed on the Card itself (className="gap-2"),
the only knob that controls it. An ESLint guard for these slots is a
follow-up.
---
 src/app/insights/medications/page.tsx                  |  2 +-
 src/components/charts/mood-chart.tsx                   |  2 +-
 src/components/custom-metrics/custom-metric-detail.tsx |  6 +++---
 src/components/illness/illness-episode-detail.tsx      |  2 +-
 src/components/illness/illness-view.tsx                |  2 +-
 src/components/insights/correlation-card.tsx           |  2 +-
 .../insights/glucose/glucose-clinical-panel.tsx        |  6 +++---
 src/components/insights/insight-status-card.tsx        | 10 +++++-----
 src/components/insights/metric-target-summary.tsx      |  2 +-
 .../insights/mood/mood-correlation-cards.tsx           |  2 +-
 src/components/insights/mood/mood-in-target-tile.tsx   |  2 +-
 .../insights/mood/mood-insights-sections.tsx           |  4 ++--
 src/components/insights/mood/mood-stability-tile.tsx   |  2 +-
 src/components/insights/mood/mood-what-stands-out.tsx  |  2 +-
 src/components/insights/sleep-hypnogram.tsx            |  2 +-
 src/components/insights/sleep-stage-stacked-bar.tsx    |  2 +-
 src/components/insights/sleep/average-sleep-card.tsx   |  4 ++--
 src/components/insights/sleep/chronotype-card.tsx      |  4 ++--
 src/components/insights/sleep/sleep-debt-card.tsx      |  4 ++--
 src/components/labs/lab-biomarker-detail.tsx           |  8 ++++----
 src/components/medications/medication-card-header.tsx  |  2 +-
 21 files changed, 36 insertions(+), 36 deletions(-)

diff --git a/src/app/insights/medications/page.tsx b/src/app/insights/medications/page.tsx
index e95c6a306..e5b7d4af7 100644
--- a/src/app/insights/medications/page.tsx
+++ b/src/app/insights/medications/page.tsx
@@ -211,7 +211,7 @@ export default function InsightsMedikamentePage() {
                 : t("medications.categoryOther");
           return (
             <Card key={med.id} className="gap-2 py-4 md:gap-3 md:py-5">
-              <CardHeader className="pb-0">
+              <CardHeader>
                 <TileHeader icon={Pill} title={med.name} />
                 <div className="text-muted-foreground mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs">
                   <span className="font-medium tabular-nums">{med.dose}</span>
diff --git a/src/components/charts/mood-chart.tsx b/src/components/charts/mood-chart.tsx
index c9dfa3a1a..cfaac77ae 100644
--- a/src/components/charts/mood-chart.tsx
+++ b/src/components/charts/mood-chart.tsx
@@ -996,7 +996,7 @@ export function MoodChart({
 
   return (
     <Card>
-      <CardHeader className="pb-2">
+      <CardHeader>
         {/* v1.4.19 A2 — mobile-first header: stack title row above
             controls row on small viewports so the bucket / comparison
             chips never push the range tabs into a 2nd line. ≥sm goes
diff --git a/src/components/custom-metrics/custom-metric-detail.tsx b/src/components/custom-metrics/custom-metric-detail.tsx
index e0f51a54a..829d89886 100644
--- a/src/components/custom-metrics/custom-metric-detail.tsx
+++ b/src/components/custom-metrics/custom-metric-detail.tsx
@@ -268,13 +268,13 @@ export function CustomMetricDetail({
 
       {isLoading ? (
         <Card>
-          <CardContent className="pt-6">
+          <CardContent>
             <Skeleton className="h-60 w-full" />
           </CardContent>
         </Card>
       ) : entries.length === 0 ? (
         <Card>
-          <CardContent className="pt-6">
+          <CardContent>
             <EmptyState
               icon={<Gauge className="size-6" />}
               title={t("customMetrics.detail.emptyTitle")}
@@ -296,7 +296,7 @@ export function CustomMetricDetail({
             icon={Gauge}
           />
           <Card>
-            <CardContent className="pt-6">
+            <CardContent>
               <CustomMetricChart
                 entries={entries}
                 unit={metric?.unit ?? ""}
diff --git a/src/components/illness/illness-episode-detail.tsx b/src/components/illness/illness-episode-detail.tsx
index 5c56898ad..9bd0dc346 100644
--- a/src/components/illness/illness-episode-detail.tsx
+++ b/src/components/illness/illness-episode-detail.tsx
@@ -109,7 +109,7 @@ export function IllnessEpisodeDetail({ episodeId }: { episodeId: string }) {
 
       {episode?.note ? (
         <Card>
-          <CardContent className="pt-6">
+          <CardContent>
             <p className="text-muted-foreground text-xs font-medium tracking-wide uppercase">
               {t("illness.detail.note")}
             </p>
diff --git a/src/components/illness/illness-view.tsx b/src/components/illness/illness-view.tsx
index 84a37e9a5..9b7efe866 100644
--- a/src/components/illness/illness-view.tsx
+++ b/src/components/illness/illness-view.tsx
@@ -132,7 +132,7 @@ function EpisodeCard({
 
   return (
     <Card className="h-full gap-3 md:gap-3">
-      <CardHeader className="pb-0">
+      <CardHeader>
         <CardTitle className="min-w-0">
           <Link
             href={`/illness/${episode.id}`}
diff --git a/src/components/insights/correlation-card.tsx b/src/components/insights/correlation-card.tsx
index 1f3c105c6..e79a44e58 100644
--- a/src/components/insights/correlation-card.tsx
+++ b/src/components/insights/correlation-card.tsx
@@ -115,7 +115,7 @@ export function CorrelationCard({ result }: CorrelationCardProps) {
           TONE_BAR_CLASSNAME[result.kind],
         )}
       />
-      <CardHeader className="pb-2">
+      <CardHeader>
         <div className="flex items-start justify-between gap-2">
           <div className="space-y-0.5">
             <CardTitle className="text-sm font-semibold">{title}</CardTitle>
diff --git a/src/components/insights/glucose/glucose-clinical-panel.tsx b/src/components/insights/glucose/glucose-clinical-panel.tsx
index 4704087dd..4958f36d1 100644
--- a/src/components/insights/glucose/glucose-clinical-panel.tsx
+++ b/src/components/insights/glucose/glucose-clinical-panel.tsx
@@ -50,7 +50,7 @@ export function GlucoseClinicalPanel() {
   if (query.isLoading) {
     return (
       <Card data-slot="glucose-clinical-panel-skeleton">
-        <CardHeader className="pb-2">
+        <CardHeader>
           <Skeleton className="h-5 w-40" />
         </CardHeader>
         <CardContent className="space-y-4">
@@ -96,7 +96,7 @@ export function GlucoseClinicalPanel() {
 
     return (
       <Card data-slot="glucose-clinical-panel" data-state="learning">
-        <CardHeader className="pb-2">
+        <CardHeader>
           <CardTitle className="flex items-center gap-2 text-base font-semibold">
             <Droplet className="h-4 w-4" aria-hidden="true" />
             {t("insights.bloodGlucose.clinical.learningTitle")}
@@ -132,7 +132,7 @@ export function GlucoseClinicalPanel() {
 
   return (
     <Card data-slot="glucose-clinical-panel" data-state="asserted">
-      <CardHeader className="pb-2">
+      <CardHeader>
         <div className="flex flex-col gap-0.5">
           <CardTitle className="flex items-center gap-2 text-base font-semibold">
             <Droplet className="h-4 w-4" aria-hidden="true" />
diff --git a/src/components/insights/insight-status-card.tsx b/src/components/insights/insight-status-card.tsx
index 43cc119af..08c86e806 100644
--- a/src/components/insights/insight-status-card.tsx
+++ b/src/components/insights/insight-status-card.tsx
@@ -109,7 +109,7 @@ export function InsightStatusCard({
         data-testid="insight-status-card-preparing"
         className="gap-1.5 py-4 md:py-5"
       >
-        <CardHeader className="pb-1">
+        <CardHeader>
           <TileHeader icon={nodeIcon(icon)} title={title} />
         </CardHeader>
         <CardContent className="space-y-2">
@@ -146,7 +146,7 @@ export function InsightStatusCard({
         // baseline across every assessment-card state.
         className="gap-1.5 py-4 md:py-5"
       >
-        <CardHeader className="pb-1">
+        <CardHeader>
           <div className="flex items-center gap-2">
             <Skeleton className="bg-muted h-5 w-5 rounded" />
             <Skeleton className="bg-muted h-4 w-32 rounded" />
@@ -166,7 +166,7 @@ export function InsightStatusCard({
   if (!hasProvider) {
     return (
       <Card className="gap-1.5 py-4 opacity-80 md:py-5">
-        <CardHeader className="pb-1">
+        <CardHeader>
           <TileHeader icon={nodeIcon(icon)} title={title} />
         </CardHeader>
         <CardContent className="flex flex-col gap-1.5">
@@ -188,7 +188,7 @@ export function InsightStatusCard({
   if (!text) {
     return (
       <Card className="gap-1.5 py-4 md:py-5">
-        <CardHeader className="pb-1">
+        <CardHeader>
           <TileHeader icon={nodeIcon(icon)} title={title} />
         </CardHeader>
         <CardContent>
@@ -231,7 +231,7 @@ export function InsightStatusCard({
       // sibling tiles. The loading skeleton keeps its own spacing.
       className="animate-insight-in gap-1.5 py-4 md:py-5"
     >
-      <CardHeader className="pb-1">
+      <CardHeader>
         {/* v1.11.5 — the top-right "cached" label was removed: it surfaced
             an implementation detail and devalued the assessment. The card
             still consumes the warm cache; it just no longer announces it.
diff --git a/src/components/insights/metric-target-summary.tsx b/src/components/insights/metric-target-summary.tsx
index fe270ac1c..2f5622e2b 100644
--- a/src/components/insights/metric-target-summary.tsx
+++ b/src/components/insights/metric-target-summary.tsx
@@ -312,7 +312,7 @@ function TargetReferencePanel({
           per-context label (Fasting / Postprandial / …) carries real,
           non-duplicative info, so it stays as a sub-caption under the
           header. */}
-      <CardHeader className="pb-2">
+      <CardHeader>
         <TileHeader
           icon={Target}
           title={t("insights.target.heading")}
diff --git a/src/components/insights/mood/mood-correlation-cards.tsx b/src/components/insights/mood/mood-correlation-cards.tsx
index e64fe1a2b..187ec34cf 100644
--- a/src/components/insights/mood/mood-correlation-cards.tsx
+++ b/src/components/insights/mood/mood-correlation-cards.tsx
@@ -98,7 +98,7 @@ function MoodCorrelationCard({
       data-kind={kind}
       className={className}
     >
-      <CardHeader className="pb-2">
+      <CardHeader>
         <div className="flex items-start justify-between gap-2">
           <CardTitle className="text-sm font-semibold">
             {t(TITLE_KEY[kind])}
diff --git a/src/components/insights/mood/mood-in-target-tile.tsx b/src/components/insights/mood/mood-in-target-tile.tsx
index 9f19c6bbc..c60c5bcd2 100644
--- a/src/components/insights/mood/mood-in-target-tile.tsx
+++ b/src/components/insights/mood/mood-in-target-tile.tsx
@@ -27,7 +27,7 @@ export function MoodInTargetTile({ pct }: { pct: number | null }) {
 
   return (
     <Card>
-      <CardHeader className="pb-2">
+      <CardHeader>
         <TileHeader icon={Target} title={t("insights.mood.inTargetTitle")} />
       </CardHeader>
       <CardContent>
diff --git a/src/components/insights/mood/mood-insights-sections.tsx b/src/components/insights/mood/mood-insights-sections.tsx
index b14dc7626..025993f3f 100644
--- a/src/components/insights/mood/mood-insights-sections.tsx
+++ b/src/components/insights/mood/mood-insights-sections.tsx
@@ -167,7 +167,7 @@ function SectionCard({
 }) {
   return (
     <Card>
-      <CardHeader className="pb-2">
+      <CardHeader>
         <TileHeader icon={icon} title={title} />
       </CardHeader>
       <CardContent>{children}</CardContent>
@@ -289,7 +289,7 @@ export function MoodInsightsSections({
         // above its body instead of floating ~16-24 px above it.
         className="animate-insight-in gap-1.5 py-4 md:py-5"
       >
-        <CardHeader className="pb-1">
+        <CardHeader>
           <TileHeader
             icon={Sparkles}
             title={t("insights.mood.betterDays.title")}
diff --git a/src/components/insights/mood/mood-stability-tile.tsx b/src/components/insights/mood/mood-stability-tile.tsx
index b2c9a9f2f..79e67fab8 100644
--- a/src/components/insights/mood/mood-stability-tile.tsx
+++ b/src/components/insights/mood/mood-stability-tile.tsx
@@ -44,7 +44,7 @@ export function MoodStabilityTile({
 
   return (
     <Card>
-      <CardHeader className="pb-2">
+      <CardHeader>
         <TileHeader
           icon={Activity}
           title={t("insights.mood.stability.title")}
diff --git a/src/components/insights/mood/mood-what-stands-out.tsx b/src/components/insights/mood/mood-what-stands-out.tsx
index 72044f855..cd9adf3e3 100644
--- a/src/components/insights/mood/mood-what-stands-out.tsx
+++ b/src/components/insights/mood/mood-what-stands-out.tsx
@@ -65,7 +65,7 @@ export function MoodWhatStandsOut({
 
   return (
     <Card data-slot="mood-what-stands-out">
-      <CardHeader className="pb-2">
+      <CardHeader>
         <TileHeader
           icon={TrendingUp}
           title={t("insights.mood.narrative.title")}
diff --git a/src/components/insights/sleep-hypnogram.tsx b/src/components/insights/sleep-hypnogram.tsx
index 00d06419b..29106ce2f 100644
--- a/src/components/insights/sleep-hypnogram.tsx
+++ b/src/components/insights/sleep-hypnogram.tsx
@@ -247,7 +247,7 @@ export function SleepHypnogram({ session }: SleepHypnogramProps) {
     // `gap-3` so the header sits closer to the timeline, reclaiming the empty
     // band the maintainer flagged. The chart keeps its 200 px footprint.
     <Card data-slot="sleep-hypnogram" className="gap-3 md:gap-3">
-      <CardHeader className="pb-0">
+      <CardHeader>
         <div className="flex flex-col gap-0.5">
           <CardTitle className="text-base font-semibold">
             {t("insights.sleep.hypnogram.title")}
diff --git a/src/components/insights/sleep-stage-stacked-bar.tsx b/src/components/insights/sleep-stage-stacked-bar.tsx
index f79bce378..b413419e0 100644
--- a/src/components/insights/sleep-stage-stacked-bar.tsx
+++ b/src/components/insights/sleep-stage-stacked-bar.tsx
@@ -209,7 +209,7 @@ export function SleepStageStackedBar({ breakdown }: SleepStageStackedBarProps) {
 
   return (
     <Card data-slot="sleep-stage-stacked-bar">
-      <CardHeader className="pb-2">
+      <CardHeader>
         <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
           <div className="flex flex-col gap-0.5">
             <CardTitle className="text-base font-semibold">
diff --git a/src/components/insights/sleep/average-sleep-card.tsx b/src/components/insights/sleep/average-sleep-card.tsx
index 81cb2b9c1..8093f3c51 100644
--- a/src/components/insights/sleep/average-sleep-card.tsx
+++ b/src/components/insights/sleep/average-sleep-card.tsx
@@ -34,7 +34,7 @@ export function AverageSleepCard({ average }: { average: AverageSleepDto }) {
   if (average.state === "partial") {
     return (
       <Card data-slot="average-sleep-card">
-        <CardHeader className="pb-0">
+        <CardHeader>
           <div className="flex items-center gap-2">
             <BedDouble className="text-info h-4 w-4" />
             <CardTitle className="text-base font-semibold">
@@ -58,7 +58,7 @@ export function AverageSleepCard({ average }: { average: AverageSleepDto }) {
 
   return (
     <Card data-slot="average-sleep-card">
-      <CardHeader className="pb-0">
+      <CardHeader>
         <div className="flex items-center gap-2">
           <BedDouble className="text-info h-4 w-4" />
           <CardTitle className="text-base font-semibold">
diff --git a/src/components/insights/sleep/chronotype-card.tsx b/src/components/insights/sleep/chronotype-card.tsx
index 03bb455e6..7f805a4c1 100644
--- a/src/components/insights/sleep/chronotype-card.tsx
+++ b/src/components/insights/sleep/chronotype-card.tsx
@@ -47,7 +47,7 @@ export function ChronotypeCard({ chronotype }: { chronotype: ChronotypeDto }) {
     const need = chronotype.freeNightsCounted + chronotype.freeNightsUntilReady;
     return (
       <Card data-slot="chronotype-card">
-        <CardHeader className="pb-0">
+        <CardHeader>
           <div className="flex items-center gap-2">
             <Clock className="text-info h-4 w-4" />
             <CardTitle className="text-base font-semibold">
@@ -73,7 +73,7 @@ export function ChronotypeCard({ chronotype }: { chronotype: ChronotypeDto }) {
 
   return (
     <Card data-slot="chronotype-card">
-      <CardHeader className="pb-0">
+      <CardHeader>
         <div className="flex items-center gap-2">
           <Clock className="text-info h-4 w-4" />
           <CardTitle className="text-base font-semibold">
diff --git a/src/components/insights/sleep/sleep-debt-card.tsx b/src/components/insights/sleep/sleep-debt-card.tsx
index cb246d5d5..66989458b 100644
--- a/src/components/insights/sleep/sleep-debt-card.tsx
+++ b/src/components/insights/sleep/sleep-debt-card.tsx
@@ -32,7 +32,7 @@ export function SleepDebtCard({ debt }: { debt: SleepDebtDto }) {
   if (debt.state === "partial") {
     return (
       <Card>
-        <CardHeader className="pb-0">
+        <CardHeader>
           <div className="flex items-center gap-2">
             <Moon className="text-info h-4 w-4" />
             <CardTitle className="text-base font-semibold">
@@ -64,7 +64,7 @@ export function SleepDebtCard({ debt }: { debt: SleepDebtDto }) {
 
   return (
     <Card>
-      <CardHeader className="pb-0">
+      <CardHeader>
         <div className="flex items-center gap-2">
           <Moon className="text-info h-4 w-4" />
           <CardTitle className="text-base font-semibold">
diff --git a/src/components/labs/lab-biomarker-detail.tsx b/src/components/labs/lab-biomarker-detail.tsx
index 8f1c7ca47..3b420d5d6 100644
--- a/src/components/labs/lab-biomarker-detail.tsx
+++ b/src/components/labs/lab-biomarker-detail.tsx
@@ -353,13 +353,13 @@ export function LabBiomarkerDetail({ biomarkerId }: { biomarkerId: string }) {
 
       {isLoading ? (
         <Card>
-          <CardContent className="pt-6">
+          <CardContent>
             <Skeleton className="h-60 w-full" />
           </CardContent>
         </Card>
       ) : readings.length === 0 ? (
         <Card>
-          <CardContent className="pt-6">
+          <CardContent>
             <EmptyState
               icon={<FlaskConical className="size-6" />}
               title={t("labs.detail.emptyTitle")}
@@ -376,7 +376,7 @@ export function LabBiomarkerDetail({ biomarkerId }: { biomarkerId: string }) {
         // Qualitative marker — no numeric strip / chart. Show the latest
         // result text on its own simple line, no unit, no range badge.
         <Card>
-          <CardContent className="space-y-1 pt-6">
+          <CardContent className="space-y-1">
             <p className="text-muted-foreground text-xs">
               {t("labs.detail.latestResult")}
             </p>
@@ -394,7 +394,7 @@ export function LabBiomarkerDetail({ biomarkerId }: { biomarkerId: string }) {
             icon={FlaskConical}
           />
           <Card>
-            <CardContent className="pt-6">
+            <CardContent>
               <LabBiomarkerChart
                 readings={readings}
                 unit={marker?.unit ?? latest?.unit ?? ""}
diff --git a/src/components/medications/medication-card-header.tsx b/src/components/medications/medication-card-header.tsx
index 17cb8151a..74551ce95 100644
--- a/src/components/medications/medication-card-header.tsx
+++ b/src/components/medications/medication-card-header.tsx
@@ -126,7 +126,7 @@ export function MedicationCardHeader({
   );
 
   return (
-    <CardHeader className="pb-2.5">
+    <CardHeader>
       <div className="flex items-start justify-between gap-2">
         {href ? (
           <Link