From 96cffb9be1235e3dc1f2dce735add3fe06e9e2d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Tue, 10 Mar 2026 17:01:44 +0100
Subject: [PATCH] fix: tighten leaderboard entry layout for mobile

- px-2 py-2 / gap-2 on mobile (was p-4 / gap-4)
- Rank badge w-8 on mobile (was w-14), font scaled down
- Avatar h-9 w-9 on mobile (was h-12 w-12)
- Score text-lg on mobile (was text-2xl), "points" label hidden on mobile
- Stats always visible, icons/gaps scaled down for mobile
- Arrow indicator hidden on mobile (hover-only, useless on touch)

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

diff --git a/packages/frontend/src/routes/play/leaderboard/+page.svelte b/packages/frontend/src/routes/play/leaderboard/+page.svelte
index d5a7eb4..b6af35c 100644
--- a/packages/frontend/src/routes/play/leaderboard/+page.svelte
+++ b/packages/frontend/src/routes/play/leaderboard/+page.svelte
@@ -66,15 +66,15 @@
           {#each data.leaderboard as entry (entry.user_id)}
             <a
               href="/users/{entry.user_id}"
-              class="flex items-center gap-4 p-4 rounded-lg hover:bg-accent/10 transition-colors group"
+              class="flex items-center gap-2 sm:gap-4 px-2 py-2 sm:p-4 rounded-lg hover:bg-accent/10 transition-colors group"
             >
               <!-- Rank Badge -->
-              <div class="flex-shrink-0 w-14 text-center">
+              <div class="flex-shrink-0 w-8 sm:w-14 text-center">
                 {#if entry.rank <= 3}
-                  <span class="text-3xl">{getMedalEmoji(entry.rank)}</span>
+                  <span class="text-2xl sm:text-3xl">{getMedalEmoji(entry.rank)}</span>
                 {:else}
                   <span
-                    class="text-xl font-bold text-muted-foreground group-hover:text-foreground transition-colors"
+                    class="text-base sm:text-xl font-bold text-muted-foreground group-hover:text-foreground transition-colors"
                   >
                     #{entry.rank}
                   </span>
@@ -83,7 +83,7 @@
 
               <!-- Avatar -->
               <Avatar
-                class="h-12 w-12 ring-2 ring-accent/20 group-hover:ring-primary/40 transition-all"
+                class="h-9 w-9 sm:h-12 sm:w-12 shrink-0 ring-2 ring-accent/20 group-hover:ring-primary/40 transition-all"
               >
                 {#if entry.avatar}
                   <AvatarImage src={getAssetUrl(entry.avatar, "mini")} alt={entry.display_name} />
@@ -100,17 +100,22 @@
                 <div class="font-semibold truncate group-hover:text-primary transition-colors">
                   {entry.display_name || $_("common.anonymous")}
                 </div>
-                <div class="text-sm text-muted-foreground flex items-center gap-3">
+                <div
+                  class="text-xs sm:text-sm text-muted-foreground flex items-center gap-2 sm:gap-3"
+                >
                   <span title={$_("gamification.recordings")}>
-                    <span class="icon-[ri--video-line] w-3.5 h-3.5 inline mr-1"></span>
+                    <span class="icon-[ri--video-line] w-3 h-3 sm:w-3.5 sm:h-3.5 inline mr-0.5"
+                    ></span>
                     {entry.recordings_count}
                   </span>
                   <span title={$_("gamification.plays")}>
-                    <span class="icon-[ri--play-line] w-3.5 h-3.5 inline mr-1"></span>
+                    <span class="icon-[ri--play-line] w-3 h-3 sm:w-3.5 sm:h-3.5 inline mr-0.5"
+                    ></span>
                     {entry.playbacks_count}
                   </span>
                   <span title={$_("gamification.achievements")}>
-                    <span class="icon-[ri--trophy-line] w-3.5 h-3.5 inline mr-1"></span>
+                    <span class="icon-[ri--trophy-line] w-3 h-3 sm:w-3.5 sm:h-3.5 inline mr-0.5"
+                    ></span>
                     {entry.achievements_count}
                   </span>
                 </div>
@@ -118,16 +123,18 @@
 
               <!-- Score -->
               <div class="text-right flex-shrink-0">
-                <div class="text-2xl font-bold text-primary">
+                <div class="text-lg sm:text-2xl font-bold text-primary">
                   {formatPoints(entry.total_weighted_points)}
                 </div>
-                <div class="text-xs text-muted-foreground">
+                <div class="text-xs text-muted-foreground hidden sm:block">
                   {$_("gamification.points")}
                 </div>
               </div>
 
               <!-- Arrow indicator -->
-              <div class="flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity">
+              <div
+                class="flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity hidden sm:block"
+              >
                 <span class="icon-[ri--arrow-right-s-line] w-5 h-5 text-muted-foreground"></span>
               </div>
             </a>