From 024620a7f12d15c144549128932a43f43aafc09c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Tue, 20 Oct 2026 16:38:29 +0200
Subject: [PATCH] fix(ui): give a wrapped card title room between its lines

CardTitle wraps but kept leading-none, so the two lines of a broken
compound touched. It is leading-tight now; a caller's own leading still
wins.
---
 .../ui/__tests__/card-title-leading.test.tsx  | 27 +++++++++++++++++++
 src/components/ui/card.tsx                    |  2 +-
 2 files changed, 28 insertions(+), 1 deletion(-)
 create mode 100644 src/components/ui/__tests__/card-title-leading.test.tsx

diff --git a/src/components/ui/__tests__/card-title-leading.test.tsx b/src/components/ui/__tests__/card-title-leading.test.tsx
new file mode 100644
index 000000000..c13b5e3fb
--- /dev/null
+++ b/src/components/ui/__tests__/card-title-leading.test.tsx
@@ -0,0 +1,27 @@
+import { describe, expect, it } from "vitest";
+import { renderToStaticMarkup } from "react-dom/server";
+
+import { CardTitle } from "../card";
+
+/**
+ * A card title wraps (`break-words hyphens-auto`), so its line height must
+ * leave room between the lines: under `leading-none` a wrapped German
+ * compound's two lines touched.
+ */
+describe("<CardTitle>", () => {
+  it("wraps with room between the lines", () => {
+    const html = renderToStaticMarkup(
+      <CardTitle>Körperfettverteilung</CardTitle>,
+    );
+    expect(html).toContain("leading-tight");
+    expect(html).not.toContain("leading-none");
+  });
+
+  it("counter-check: a caller's own leading still wins", () => {
+    const html = renderToStaticMarkup(
+      <CardTitle className="leading-snug">Puls</CardTitle>,
+    );
+    expect(html).toContain("leading-snug");
+    expect(html).not.toContain("leading-tight");
+  });
+});
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
index e64293365..13eca51ac 100644
--- a/src/components/ui/card.tsx
+++ b/src/components/ui/card.tsx
@@ -64,7 +64,7 @@ function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card-title"
       className={cn(
-        "leading-none font-semibold break-words hyphens-auto",
+        "leading-tight font-semibold break-words hyphens-auto",
         className,
       )}
       {...props}