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.

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");
+  });
+});

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}