fix(targets): tighten card gap to eliminate dead space below the header

Override the Card primitive's default gap-4 md:gap-6 with gap-3
md:gap-4 and drop the CardHeader's pb-3 to pb-0. The default
spacing stacked on top of the CardHeader padding rendered a ~36 px
dead gap between the metric label and the headline number on md+,
so the card visually split into two disconnected blocks. The
tighter rhythm pulls the value back under the label so the card
reads as one cohesive unit.
This commit is contained in:
Marc-André Bombeck committed 2026-05-17 14:23:45 +02:00
1 parent b5a605cf31
commit 758f13ec98
1 file changed
+8 -2
+8 -2
View File
@@ -413,9 +413,15 @@ export function TargetCard({
data-slot="target-card"
data-target-type={target.type}
data-status={statusGroup}
className="flex h-full flex-col"
// v1.4.37 W4a item 3 — override the Card primitive's default
// `gap-4 md:gap-6` to `gap-3 md:gap-4`. The default gap stacked
// on top of the CardHeader's `pb-3` rendered a ~36 px dead
// space between "Blutdruck optimal" and the headline number;
// the tighter rhythm pulls the value back under the label so
// the card reads as one unit instead of two separated blocks.
className="flex h-full flex-col gap-3 md:gap-4"
>
<CardHeader className="gap-2 pb-3 sm:gap-3">
<CardHeader className="gap-2 pb-0 sm:gap-3">
{/* Row 1: icon + label (left) ⋯ status pill + edit-cog (right
on sm+, stacked on mobile). Stacking on mobile keeps the
headline number visible at sub-380px viewports where an