804: Reordered mobile leaderboard

[az2924]

804

Description of changes

• Conditionally reordered top three depending on isMobile hook

Checklist before review

• I have done a thorough self-review of the PR
• Copilot has reviewed my latest changes, and all comments have been fixed and/or closed.
• If I have made database changes, I have made sure I followed all the db repo rules listed in the wiki here. (check if no db changes)
• All tests have passed
• I have successfully deployed this PR to staging
• I have done manual QA in both dev (and staging if possible) and attached screenshots below.

Screenshots

Dev

Staging

[az2924]

/deploy

[github-actions]

Available PR Commands

• /ai - Triggers all AI review commands at once
• /review - AI review of the PR changes
• /describe - AI-powered description of the PR
• /improve - AI-powered suggestions
• /deploy - Deploy to staging

See: https://github.com/tahminator/codebloom/wiki/CI-Commands

[github-actions]

Title

804: Reordered mobile leaderboard

---

PR Type

Bug fix

---

Description

• Mobile: render 1st, 2nd, 3rd sequentially

• Desktop: keep 2nd, 1st, 3rd layout

• Consolidated page/debouncedQuery condition once

• No prop or data logic changes

---

Diagram Walkthrough

flowchart LR
  start["At page 1 and no query"]
  cond["Check isMobile"]
  mobile["Render order: first → second → third"]
  desktop["Render order: second → first → third"]

  start -- "then" --> cond
  cond -- "true" --> mobile
  cond -- "false" --> desktop

Loading

File Walkthrough

	Relevant files
Bug fix	Leaderboard.tsx Reorder top three based on mobile detection                            js/src/app/leaderboard/_components/Leaderboard.tsx Added isMobile-based conditional rendering for top three Mobile order: first, then second, then third Desktop order preserved: second, first, third Consolidated page === 1 and !debouncedQuery checks +105/-47

---

[github-actions]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Maintainability Duplicated JSX for mobile vs. desktop ordering increases drift risk; consider computing an ordered array (based on isMobile) and mapping to a single LeaderboardCard rendering path. {isMobile ? <> {first && ( <LeaderboardCard placeString={getOrdinal(first.index)} sizeOrder={1} discordName={first.discordName} leetcodeUsername={first.leetcodeUsername} totalScore={first.totalScore} nickname={first.nickname} width={"300px"} userId={first.id} tags={first.tags} isLoading={isPlaceholderData} startDate={startDate} endDate={endDate} /> )} {second && ( <LeaderboardCard placeString={getOrdinal(second.index)} sizeOrder={2} discordName={second.discordName} leetcodeUsername={second.leetcodeUsername} totalScore={second.totalScore} nickname={second.nickname} width={"300px"} userId={second.id} tags={second.tags} isLoading={isPlaceholderData} startDate={startDate} endDate={endDate} /> )} {third && ( <LeaderboardCard placeString={getOrdinal(third.index)} sizeOrder={3} discordName={third.discordName} leetcodeUsername={third.leetcodeUsername} totalScore={third.totalScore} nickname={third.nickname} width={"300px"} userId={third.id} tags={third.tags} isLoading={isPlaceholderData} startDate={startDate} endDate={endDate} /> )} </> : <> {second && ( <LeaderboardCard placeString={getOrdinal(second.index)} sizeOrder={2} discordName={second.discordName} leetcodeUsername={second.leetcodeUsername} totalScore={second.totalScore} nickname={second.nickname} width={"300px"} userId={second.id} tags={second.tags} isLoading={isPlaceholderData} startDate={startDate} endDate={endDate} /> )} {first && ( <LeaderboardCard placeString={getOrdinal(first.index)} sizeOrder={1} discordName={first.discordName} leetcodeUsername={first.leetcodeUsername} totalScore={first.totalScore} nickname={first.nickname} width={"300px"} userId={first.id} tags={first.tags} isLoading={isPlaceholderData} startDate={startDate} endDate={endDate} /> )} {third && ( <LeaderboardCard placeString={getOrdinal(third.index)} sizeOrder={3} discordName={third.discordName} leetcodeUsername={third.leetcodeUsername} totalScore={third.totalScore} nickname={third.nickname} width={"300px"} userId={third.id} tags={third.tags} isLoading={isPlaceholderData} startDate={startDate} endDate={endDate} /> )} </> } Responsive layout Hard-coded width={"300px"} for all cards may not fit smaller mobile screens; use responsive widths (e.g., 100% on base) to prevent overflow and improve UX. width={"300px"} userId={first.id} tags={first.tags} isLoading={isPlaceholderData} startDate={startDate} endDate={endDate} /> )} {second && ( <LeaderboardCard placeString={getOrdinal(second.index)} sizeOrder={2} discordName={second.discordName} leetcodeUsername={second.leetcodeUsername} totalScore={second.totalScore} nickname={second.nickname} width={"300px"} userId={second.id} tags={second.tags} isLoading={isPlaceholderData} startDate={startDate} endDate={endDate} /> )} {third && ( <LeaderboardCard placeString={getOrdinal(third.index)} sizeOrder={3} discordName={third.discordName} leetcodeUsername={third.leetcodeUsername} totalScore={third.totalScore} nickname={third.nickname} width={"300px"} userId={third.id} tags={third.tags} isLoading={isPlaceholderData} startDate={startDate} endDate={endDate} /> )} </> : <> {second && ( <LeaderboardCard placeString={getOrdinal(second.index)} sizeOrder={2} discordName={second.discordName} leetcodeUsername={second.leetcodeUsername} totalScore={second.totalScore} nickname={second.nickname} width={"300px"} userId={second.id} tags={second.tags} isLoading={isPlaceholderData} startDate={startDate} endDate={endDate} /> )} {first && ( <LeaderboardCard placeString={getOrdinal(first.index)} sizeOrder={1} discordName={first.discordName} leetcodeUsername={first.leetcodeUsername} totalScore={first.totalScore} nickname={first.nickname} width={"300px"} userId={first.id} tags={first.tags} isLoading={isPlaceholderData} startDate={startDate} endDate={endDate} /> )} {third && ( <LeaderboardCard placeString={getOrdinal(third.index)} sizeOrder={3} discordName={third.discordName} leetcodeUsername={third.leetcodeUsername} totalScore={third.totalScore} nickname={third.nickname} width={"300px"} userId={third.id} Hydration risk If this component renders server-side, verify the isMobile hook avoids SSR/client mismatch to prevent a flash/reorder on hydration. {isMobile ? <> {first && ( <LeaderboardCard placeString={getOrdinal(first.index)} sizeOrder={1} discordName={first.discordName} leetcodeUsername={first.leetcodeUsername} totalScore={first.totalScore} nickname={first.nickname} width={"300px"} userId={first.id} tags={first.tags} isLoading={isPlaceholderData} startDate={startDate} endDate={endDate} /> )} {second && ( <LeaderboardCard placeString={getOrdinal(second.index)} sizeOrder={2} discordName={second.discordName} leetcodeUsername={second.leetcodeUsername} totalScore={second.totalScore} nickname={second.nickname} width={"300px"} userId={second.id} tags={second.tags} isLoading={isPlaceholderData} startDate={startDate} endDate={endDate} /> )} {third && ( <LeaderboardCard placeString={getOrdinal(third.index)} sizeOrder={3} discordName={third.discordName} leetcodeUsername={third.leetcodeUsername} totalScore={third.totalScore} nickname={third.nickname} width={"300px"} userId={third.id} tags={third.tags} isLoading={isPlaceholderData} startDate={startDate} endDate={endDate} /> )} </> : <>

[az2924]

/deploy