fix vs for mobile

projects/website/src/components/score/score-rank-info.tsx

@@ -5,7 +5,7 @@ import { getPageFromRank } from "@ssr/common/utils/utils";
 import { ScoreSaberScore } from "@ssr/common/model/score/impl/scoresaber-score";
 import ScoreSaberLeaderboard from "@ssr/common/model/leaderboard/impl/scoresaber-leaderboard";
 import { ScoreTimeSet } from "@/components/score/score-time-set";
-import { timeAgo } from "@ssr/common/utils/time-utils";
+import { ScoreTimeSetVs } from "@/components/score/score-time-set-vs";
 
 type Props = {
   score: ScoreSaberScore;
@@ -23,13 +23,10 @@ export default function ScoreRankInfo({ score, leaderboard }: Props) {
           </p>
         </Link>
       </div>
+      <div className="flex items-center gap-2 lg:flex-col lg:gap-0">
         <ScoreTimeSet score={score} />
-      {score.previousScore?.timestamp && (
-        <div className="text-xs text-gray-400 flex flex-row gap-2 items-center">
-          <p>vs</p>
-          <p>{timeAgo(new Date(score.previousScore.timestamp))}</p>
+        <ScoreTimeSetVs score={score} />
       </div>
-      )}
     </div>
   );
 }

projects/website/src/components/score/score-time-set-vs.tsx

@@ -0,0 +1,37 @@
+import { format } from "@formkit/tempo";
+import { timeAgo } from "@ssr/common/utils/time-utils";
+import Tooltip from "@/components/tooltip";
+import { ScoreSaberScore } from "@ssr/common/model/score/impl/scoresaber-score";
+
+type ScoreTimeSetProps = {
+  /**
+   * The score that was set.
+   */
+  score: ScoreSaberScore;
+};
+
+export function ScoreTimeSetVs({ score }: ScoreTimeSetProps) {
+  if (!score.previousScore) {
+    return undefined;
+  }
+
+  return (
+    <Tooltip
+      display={
+        <p>
+          {format({
+            date: new Date(score.timestamp),
+            format: "DD MMMM YYYY HH:mm a",
+          })}
+        </p>
+      }
+    >
+      <div>
+        <div className="text-xs text-gray-400 flex flex-row gap-2 items-center">
+          <p>vs</p>
+          <p>{timeAgo(new Date(score.previousScore.timestamp))}</p>
+        </div>
+      </div>
+    </Tooltip>
+  );
+}