made the score info boxes a grid (still need work)

src/components/Score.tsx

@@ -23,6 +23,7 @@ export default function Score({ score, leaderboard }: ScoreProps) {
           {moment(score.timeSet).fromNow()}
         </p>
       </div>
+      {/* Song Image */}
       <div className="flex w-full items-center gap-2">
         <Image
           src={leaderboard.coverImage}
@@ -31,6 +32,7 @@ export default function Score({ score, leaderboard }: ScoreProps) {
           width={60}
           height={60}
         />
+        {/* Song Info */}
         <div className="w-fit truncate text-blue-500">
           <p>{leaderboard.songName}</p>
           <p>
@@ -41,10 +43,13 @@ export default function Score({ score, leaderboard }: ScoreProps) {
       </div>
       <div className="flex items-center justify-between p-1 md:items-start md:justify-end">
         <div className="flex flex-col md:hidden">
+          {/* Score rank */}
           <div className="flex items-center gap-1">
             <GlobeAsiaAustraliaIcon width={20} height={20} />
             <p>#{score.rank}</p>
           </div>
+
+          {/* Time Set (Mobile) */}
           <div>
             {" "}
             <p className="block text-sm text-gray-200 xs:hidden">
@@ -52,13 +57,17 @@ export default function Score({ score, leaderboard }: ScoreProps) {
             </p>
           </div>
         </div>
-        <div className="flex items-end justify-end gap-2">
+
+        {/* PP */}
+        <div className="grid w-fit grid-cols-2 grid-rows-1 justify-end gap-2">
           {score.pp > 0 && (
             <ScoreStatLabel
+              className="bg-blue-500 text-center"
               value={formatNumber(score.pp.toFixed(2)) + "pp"}
-              className="bg-blue-500"
             />
           )}
+
+          {/* Percentage score */}
           <ScoreStatLabel
             value={
               !leaderboard.maxScore
@@ -67,6 +76,13 @@ export default function Score({ score, leaderboard }: ScoreProps) {
                   "%"
             }
           />
+
+          {/* Missed Notes */}
+          <ScoreStatLabel
+            className="min-w-[3rem] bg-red-500"
+            title={`${score.missedNotes} missed notes. ${score.badCuts} bad cuts.`}
+            value={formatNumber(score.missedNotes + score.badCuts) + "x"}
+          />
         </div>
       </div>
     </div>

src/components/ScoreStatLabel.tsx

@@ -2,17 +2,26 @@ import clsx from "clsx";
 
 type LabelProps = {
   value: string;
+  title?: string;
   className?: string;
 };
 
 export default function ScoreStatLabel({
   value,
+  title,
   className = "bg-neutral-700",
 }: LabelProps) {
   return (
-    <div className={clsx("flex flex-col justify-center rounded-md", className)}>
+    <div
+      className={clsx(
+        "flex min-w-[5rem] flex-col justify-center rounded-md",
+        className,
+      )}
+    >
       <div className="p4-[0.3rem] flex items-center gap-2 pb-[0.2rem] pl-[0.3rem] pr-[0.3rem] pt-[0.2rem]">
-        <p>{value}</p>
+        <p className="w-full text-center" title={title}>
+          {value}
+        </p>
       </div>
     </div>
   );