From 9182b60dc87e5e863df0989daf0b6233f68b15eb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Fri, 19 Jun 2026 21:10:21 +0200
Subject: [PATCH] feat(settings): add SettingsCard primitive for the standard
 card shape

Wrap the ui Card so every Settings section composes from one bordered
container with the shared p-4 md:p-6 padding contract, replacing the
hand-rolled bg-card border-border rounded-xl border p-4 sm:p-6 div that
bypassed the primitive and stepped padding at sm: instead of md:.
---
 src/components/settings/settings-card.tsx | 39 +++++++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 src/components/settings/settings-card.tsx

diff --git a/src/components/settings/settings-card.tsx b/src/components/settings/settings-card.tsx
new file mode 100644
index 000000000..237ae497f
--- /dev/null
+++ b/src/components/settings/settings-card.tsx
@@ -0,0 +1,39 @@
+import * as React from "react";
+
+import { Card } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+/**
+ * `<SettingsCard>` — the standard Settings card container.
+ *
+ * Every Settings section paints the same bordered surface: a rounded card
+ * with the app's one card-padding contract (`p-4 md:p-6` — 16 px on phones,
+ * 24 px from `md` up). Before this primitive the surface hand-rolled
+ * `bg-card border-border rounded-xl border p-4 sm:p-6` in ~35 files, which
+ * (a) bypassed the `<Card>` primitive entirely and (b) stepped padding at
+ * `sm:` (640 px) instead of `md:` (768 px), so on a ~700 px tablet Settings
+ * cards read denser than every other surface.
+ *
+ * This wraps the ui `<Card>` so the whole surface composes from one shape.
+ * Unlike the bare `<Card>` it does NOT impose the `flex flex-col gap` layout:
+ * Settings cards manage their own internal rhythm (`SettingsCardHeader` +
+ * `mt-4`/`space-y-*` bodies), so the container only owns the border, radius,
+ * background, and padding. Pass `className` for per-card extras
+ * (`scroll-mt-28`, `space-y-4`, `flex h-full flex-col`, …).
+ */
+export function SettingsCard({
+  className,
+  ...props
+}: React.ComponentProps<typeof Card>) {
+  return (
+    <Card
+      className={cn(
+        // Reset the primitive's flex/gap layout — Settings card bodies own
+        // their internal spacing — and apply the shared `p-4 md:p-6` padding.
+        "block gap-0 p-4 md:p-6",
+        className,
+      )}
+      {...props}
+    />
+  );
+}