improve the per score leaderboard view and add a border to the card to make it more obvious

src/components/leaderboard/leaderboard-player.tsx

@@ -13,10 +13,10 @@ export default function LeaderboardPlayer({ score }: Props) {
       <Image
         unoptimized
         src={player.profilePicture}
-        width={32}
-        height={32}
+        width={48}
+        height={48}
         alt="Song Artwork"
-        className="rounded-md min-w-[32px]"
+        className="rounded-md min-w-[48px]"
         priority
       />
       <div>

src/components/leaderboard/leaderboard-score.tsx

@@ -2,7 +2,6 @@
 
 import ScoreSaberLeaderboard from "@/common/data-fetcher/types/scoresaber/scoresaber-leaderboard";
 import ScoreSaberScore from "@/common/data-fetcher/types/scoresaber/scoresaber-score";
-import { timeAgo } from "@/common/time-utils";
 import ScoreRankInfo from "../player/score/score-rank-info";
 import LeaderboardPlayer from "./leaderboard-player";
 import LeaderboardScoreStats from "./leaderboard-score-stats";
@@ -21,10 +20,9 @@ type Props = {
 
 export default function LeaderboardScore({ score, leaderboard }: Props) {
   return (
-    <div className="grid w-full pb-2 pt-2 gap-2 lg:gap-0 first:pt-0 last:pb-0 grid-cols-[20px 1fr_1fr] lg:grid-cols-[100px_4fr_0.8fr_300px]">
-      <ScoreRankInfo score={score} isLeaderboard />
+    <div className="grid items-center w-full pb-2 pt-2 gap-2 lg:gap-0 first:pt-0 last:pb-0 grid-cols-[20px 1fr_1fr] lg:grid-cols-[130px_4fr_300px]">
+      <ScoreRankInfo score={score} />
       <LeaderboardPlayer score={score} />
-      <p className="text-sm text-right">{timeAgo(new Date(score.timeSet))}</p>
       <LeaderboardScoreStats score={score} leaderboard={leaderboard} />
     </div>
   );

src/components/leaderboard/leaderboard-scores.tsx

@@ -48,7 +48,7 @@ export default function LeaderboardScores({ leaderboard }: Props) {
 
   return (
     <motion.div initial={{ opacity: 0, y: -50 }} exit={{ opacity: 0, y: -50 }} animate={{ opacity: 1, y: 0 }}>
-      <Card className="flex gap-2">
+      <Card className="flex gap-2 border border-input mt-2">
         <div className="text-center">
           {isError && <p>Oopsies! Something went wrong.</p>}
           {currentScores.scores.length === 0 && <p>No scores found. Invalid Page?</p>}

src/components/player/score/score-rank-info.tsx

@@ -2,26 +2,19 @@ import ScoreSaberScore from "@/common/data-fetcher/types/scoresaber/scoresaber-s
 import { formatNumberWithCommas } from "@/common/number-utils";
 import { timeAgo } from "@/common/time-utils";
 import { GlobeAmericasIcon } from "@heroicons/react/24/solid";
-import clsx from "clsx";
 
 type Props = {
   score: ScoreSaberScore;
-  isLeaderboard?: boolean;
 };
 
-export default function ScoreRankInfo({ score, isLeaderboard = false }: Props) {
+export default function ScoreRankInfo({ score }: Props) {
   return (
-    <div
-      className={clsx(
-        "flex w-full flex-row justify-between lg:w-[125px] lg:flex-col",
-        !isLeaderboard && "lg:justify-center items-center"
-      )}
-    >
+    <div className="flex w-full flex-row justify-between lg:w-[125px] lg:flex-col lg:justify-center items-center">
       <div className="flex gap-1 items-center">
         <GlobeAmericasIcon className="w-5 h-5" />
         <p className="text-pp">#{formatNumberWithCommas(score.rank)}</p>
       </div>
-      {!isLeaderboard && <p className="text-sm">{timeAgo(new Date(score.timeSet))}</p>}
+      <p className="text-sm">{timeAgo(new Date(score.timeSet))}</p>
     </div>
   );
 }