From c5b04be9818009fce273e1a8c4ac65e1594e4c87 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Tue, 10 Mar 2026 17:03:16 +0100
Subject: [PATCH] fix: align How It Works card padding with leaderboard card

Use CardHeader + CardTitle instead of an h3 inside CardContent,
so both cards get the same pt-0 treatment on CardContent.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../frontend/src/routes/play/leaderboard/+page.svelte  | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/frontend/src/routes/play/leaderboard/+page.svelte b/packages/frontend/src/routes/play/leaderboard/+page.svelte
index b6af35c..8dd0334 100644
--- a/packages/frontend/src/routes/play/leaderboard/+page.svelte
+++ b/packages/frontend/src/routes/play/leaderboard/+page.svelte
@@ -158,11 +158,13 @@
 
   <!-- Info Card -->
   <Card class="mt-6 bg-card/50 border-border/50">
-    <CardContent class="p-6">
-      <h3 class="font-semibold mb-2 flex items-center gap-2">
-        <span class="icon-[ri--information-line] w-4 h-4 text-primary"></span>
+    <CardHeader>
+      <CardTitle class="flex items-center gap-2">
+        <span class="icon-[ri--information-line] w-5 h-5 text-primary"></span>
         {$_("gamification.how_it_works")}
-      </h3>
+      </CardTitle>
+    </CardHeader>
+    <CardContent>
       <p class="text-sm text-muted-foreground mb-4">
         {$_("gamification.how_it_works_description")}
       </p>