From 3a5f7debdbcedea358ac1b5905155e4072a901a0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Sat, 16 May 2026 17:48:24 +0200
Subject: [PATCH] fix(ui): normalise Card defaults to p-4 md:p-6
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 src/components/ui/card.tsx | 24 ++++++++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
index 4f880247e..5db913006 100644
--- a/src/components/ui/card.tsx
+++ b/src/components/ui/card.tsx
@@ -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}
     />
   );