fix:leaderboard update leaderboard-style on mobile

[AlinaRyabova]

Summary by CodeRabbit

• Improvements
  • Enhanced leaderboard responsiveness with adaptive design: the rising indicator is now intelligently hidden on small screens and displayed on larger viewports for optimized space utilization and improved readability across devices.
  • Refined leaderboard podium styling system with improved visual consistency and presentation across all ranking positions.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[netlify]

✅ Deploy Preview for develop-devlovers ready!

Name	Link
🔨 Latest commit	cd8d80c
🔍 Latest deploy log	https://app.netlify.com/projects/develop-devlovers/deploys/6973b2b2c780260007c13d2f
😎 Deploy Preview	https://deploy-preview-188--develop-devlovers.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai]

Caution

Review failed

The pull request is closed.

📝 Walkthrough

Walkthrough

Refactors the LeaderboardPodium component by extracting per-rank heights, animation delays, and styles into a centralized rankConfig constant, replacing hard-coded values with configuration lookups. Updates LeaderboardTable's TableRow typing for consistency and adjusts rising indicator responsiveness.

Changes

Cohort / File(s)	Summary
Leaderboard Podium Styling frontend/components/leaderboard/LeaderboardPodium.tsx	Introduces rankConfig constant mapping ranks 1–3 to height, animation delay, and nested style objects (border, background, text, badge, ring, bar colors). Replaces inline per-rank logic with rankConfig/rankStyles lookups for avatar ring, badge, and top bar styling. Crown rendering remains rank-1 conditioned with updated positioning classes.
Leaderboard Table Refinements frontend/components/leaderboard/LeaderboardTable.tsx	Updates TableRow prop typing: t from any to ReturnType<typeof useTranslations> for consistency. Modifies rising indicator responsive visibility using hidden sm:flex class toggle to hide on small screens and show on larger viewports.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

• #182: Modifies LeaderboardPodium.tsx to adjust per-rank podium rendering with height, badge, and rank-specific styling changes.
• #187: Modifies LeaderboardPodium.tsx to refactor per-rank hard-coded logic into a centralized rank-based style and config mapping.
• #165: Updates LeaderboardPodium and LeaderboardTable with styling, rank-specific layout, and responsive class adjustments.

Suggested reviewers

• AM1007

Poem

🐰 The leaderboard hops with fresh new cheer,
Ranks bundled up in configs so clear,
Hard-coded heights now dance in arrays,
While badges sparkle in brand-new ways,
Responsive now from small to tall! 🏆

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main objective—updating leaderboard styling for mobile—and corresponds directly to the primary changes across all three modified files.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@frontend/components/leaderboard/LeaderboardTable.tsx`:
- Around line 145-147: The Tailwind class on the span rendering {user.username}
uses an unsupported xs: breakpoint; update the className on that span (the
element containing {user.username}) to remove the xs:max-w-[140px] token —
either replace it with sm:max-w-[140px] or simply drop xs: and rely on existing
sm/md breakpoints so the classes become valid in your Tailwind config.

🧹 Nitpick comments (3)

frontend/components/leaderboard/LeaderboardPodium.tsx (1)

18-53: Consolidate rank config to avoid repeated allocation and inconsistent fallbacks.

Right now rankStyles, height, and delay are recomputed on each iteration. Centralizing them into a single rank config (outside the render loop) makes updates safer and keeps fallbacks consistent.

♻️ Suggested refactor

+const rankConfig = {
+  1: {
+    height: '100%',
+    delay: 0.4,
+    style: {
+      border: 'border-yellow-400 dark:border-yellow-500',
+      bg: 'bg-yellow-400/20 dark:bg-yellow-500/10',
+      text: 'text-yellow-600 dark:text-yellow-400',
+      badge: 'bg-yellow-400 dark:bg-yellow-500',
+      ring: 'border-yellow-400 dark:border-yellow-500',
+      barTop: 'bg-yellow-400 dark:bg-yellow-500',
+    },
+  },
+  2: {
+    height: '50%',
+    delay: 0.2,
+    style: {
+      border: 'border-slate-300 dark:border-slate-500',
+      bg: 'bg-slate-300/20 dark:bg-slate-500/10',
+      text: 'text-slate-600 dark:text-slate-400',
+      badge: 'bg-slate-400 dark:bg-slate-500',
+      ring: 'border-slate-300 dark:border-slate-500',
+      barTop: 'bg-slate-300 dark:bg-slate-500',
+    },
+  },
+  3: {
+    height: '35%',
+    delay: 0.6,
+    style: {
+      border: 'border-orange-300 dark:border-orange-500',
+      bg: 'bg-orange-300/20 dark:bg-orange-500/10',
+      text: 'text-orange-600 dark:text-orange-400',
+      badge: 'bg-orange-400 dark:bg-orange-500',
+      ring: 'border-orange-300 dark:border-orange-500',
+      barTop: 'bg-orange-300 dark:bg-orange-500',
+    },
+  },
+} as const;
+
 export function LeaderboardPodium({ topThree }: { topThree: User[] }) {
   const podiumOrder = [
     topThree.find(u => u.rank === 2),
     topThree.find(u => u.rank === 1),
     topThree.find(u => u.rank === 3),
   ].filter(Boolean) as User[];
 
   return (
     <div className="flex items-end justify-center gap-4 md:gap-8 h-[350px] w-full max-w-3xl mx-auto">
       {podiumOrder.map(user => {
         const rank = user.rank;
         const isFirst = rank === 1;
-
-        const height = rank === 1 ? '100%' : rank === 2 ? '50%' : '35%';
-        const delay = rank === 1 ? 0.4 : rank === 2 ? 0.2 : 0.6;
-
-        const rankStyles = {
-          1: { /* ... */ },
-          2: { /* ... */ },
-          3: { /* ... */ },
-        };
-
-        const style = rankStyles[rank as 1 | 2 | 3] || rankStyles[2];
+        const { height, delay, style } =
+          rankConfig[rank as 1 | 2 | 3] ?? rankConfig[2];

frontend/components/leaderboard/LeaderboardTable.tsx (2)

99-103: Avoid using any type for the translation function.

The t: any type defeats TypeScript's purpose. Consider using the proper type from next-intl.

♻️ Suggested type improvement

+import { useTranslations } from 'next-intl';
+
 function TableRow({
   user,
   isCurrentUser,
   t,
 }: {
   user: User;
   isCurrentUser: boolean;
-  t: any;
+  t: ReturnType<typeof useTranslations>;
 }) {

---

169-171: Very small text may have accessibility concerns.

text-[6px] (and sm:text-[8px]) is extremely small and may be difficult to read for users with visual impairments. Consider if this label truly needs to be this small or if it can be slightly larger while still fitting the design.

[coderabbitai]

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

frontend/components/leaderboard/LeaderboardTable.tsx (1)

137-172: Avoid block elements inside an inline <span>.
Nesting <div> (and <motion.div>) inside <span> violates HTML5's content model rules. The <span> element can only contain phrasing content, while <div> is flow content and cannot be a direct child.

✅ Suggested fix

-              {isCurrentUser && (
-                <div className="relative flex-shrink-0 flex items-center justify-center w-5 h-5 sm:w-8 sm:h-8 ml-1">
-                  <motion.div
+              {isCurrentUser && (
+                <span className="relative flex-shrink-0 inline-flex items-center justify-center w-5 h-5 sm:w-8 sm:h-8 ml-1">
+                  <motion.span
                     animate={{ scale: [1, 1.2, 1] }}
                     transition={{
                       repeat: Infinity,
                       duration: 0.8,
                       ease: 'easeInOut',
                     }}
                     className="absolute inset-0 text-[var(--accent-primary)]"
                   >
                     <svg
                       viewBox="0 0 24 24"
                       fill="currentColor"
                       className="w-full h-full drop-shadow-md"
                     >
                       <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
                     </svg>
-                  </motion.div>
+                  </motion.span>

                   <span className="relative z-10 text-[6px] sm:text-[8px] font-black text-white uppercase tracking-tighter -mt-0.5">
                     {t('you') || 'YOU'}
                   </span>
-                </div>
+                </span>
               )}

🧹 Nitpick comments (1)

frontend/components/leaderboard/LeaderboardPodium.tsx (1)

57-63: Avoid unsound rank casting; guard ranks explicitly.
If User.rank isn’t already narrowed to 1 | 2 | 3, a runtime guard keeps types honest and avoids relying on as casts.

♻️ Proposed refactor

-        const rank = user.rank as 1 | 2 | 3;
+        const rank =
+          user.rank === 1 || user.rank === 2 || user.rank === 3 ? user.rank : 2;
         const isFirst = rank === 1;
 
-        const config = rankConfig[rank] || rankConfig[2];
+        const config = rankConfig[rank];