tom/HealthLog
1
0 Fork 0
mirror of https://github.com/MBombeck/HealthLog.git synced 2026-11-08 12:32:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): normalise Card defaults to p-4 md:p-6

Browse Source 
Pre-v1.4.33 the shadcn Card defaults shipped `py-6` + `px-6` (uniform
24 px every breakpoint) while the dashboard tile-strip + chart cards
used `p-4 md:p-6` (16 px mobile, 24 px md+). Side-by-side on
`/insights` the correlation cards + daily-briefing read as denser
than the chart cards next to them; the visual reads as two card
languages on the same page.

This patch lifts the Card primitive (and its CardHeader / CardContent
/ CardFooter siblings) onto the same `p-4 md:p-6` token. Existing
consumers that paint their own explicit padding continue to win
through the `cn(...)` merge. Tests across `src/components/ui` /
`src/components/insights/__tests__` / `src/components/charts/__tests__`
(400 tests) still green.

Refs .planning/round-v1433-audit-polish.md §4.1 + Win 4.
This commit is contained in:
Marc-André Bombeck committed 2026-05-16 17:48:24 +02:00
1 parent fe94299122
commit 3a5f7debdb
1 file changed
+20 -4
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ui/card.tsx
+20 -4
View File
@@ -2,12 +2,25 @@ import * as React from "react";
import { cn } from "@/lib/utils";
/**
* v1.4.33 IW9 — Card padding normalised on `p-4 md:p-6`.
*
* Pre-v1.4.33 the shadcn defaults shipped `py-6` + `px-6` (uniform
* 24 px on every breakpoint) while the dashboard tile-strip + chart
* cards used `p-4 md:p-6` (16 px mobile, 24 px md+). Side-by-side on
* `/insights` the correlation cards + daily-briefing read as "denser"
* than the chart cards next to them; the visual reads as two card
* languages on the same page. Matching the dashboard token here gives
* the whole app a single card-padding contract.
*
* Refs `.planning/round-v1433-audit-polish.md` §4.1 + Win 4.
*/
function Card({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="card"
className={cn(
"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
"bg-card text-card-foreground flex flex-col gap-4 rounded-xl border py-4 shadow-sm md:gap-6 md:py-6",
className,
)}
{...props}
@@ -20,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-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
"@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",
className,
)}
{...props}
@@ -65,7 +78,7 @@ function CardContent({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="card-content"
className={cn("px-6", className)}
className={cn("px-4 md:px-6", className)}
{...props}
/>
);
@@ -75,7 +88,10 @@ function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="card-footer"
className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
className={cn(
"flex items-center px-4 md:px-6 [.border-t]:pt-4 md:[.border-t]:pt-6",
className,
)}
{...props}
/>
);